/* ========================================
   SOCIAL MEDIA ICONS - PREVENT WRAPPING
   ======================================== */

/* Target ONLY social media icon lists on homepage */
.page-id-5 .wp-block-social-links.is-content-justification-center {
    gap: 0.75em !important;
}

/* On screens above 380px, prevent wrapping with slightly tighter spacing */
@media (min-width: 380px) {
    .page-id-5 .wp-block-social-links.is-content-justification-center {
        flex-wrap: nowrap !important;
        gap: 0.65em !important;
    }
}

/* ========================================
   HOMEPAGE: SYSTEMATIC BLOCK SPACING
   ======================================== */

/* Homepage raja image - border-radius on all screen sizes */
.page-id-5 .wp-image-1012,
.page-id-5 figure .wp-image-1012,
.page-id-5 .wp-block-image .wp-image-1012 {
    border-radius: 12px !important;
}

/* Systematic spacing: Reduce default WordPress block spacing on homepage */
.page-id-5 .wp-block-post-content.is-layout-constrained > * {
    margin-block-start: calc(1.5 * var(--wp--custom--gap--baseline, 15px));
    margin-block-end: 0;
}

/* Specific spacing adjustments using adjacent sibling selectors */
/* Button groups followed by paragraphs: reduce spacing */
.page-id-5 .wp-block-buttons + p {
    margin-block-start: 0.5em !important;
}

/* Button groups followed by images: normal spacing */
.page-id-5 .wp-block-buttons + figure {
    margin-block-start: 1em !important;
}

/* Paragraphs followed by center-thumbnails: reduce spacing */
.page-id-5 p + .center-thumbnails {
    margin-block-start: 0.5em !important;
}

/* ========================================
   CAT SHELF GUIDE: SPACING BETWEEN EMAIL BUTTON AND HERO IMAGE
   ======================================== */

/* Add spacing between "Email me a PDF" button and hero image on cat-shelf-guide page */
.page-id-145 .wp-block-buttons:has(a[href*="cat-shelf-guide/email"]) {
    margin-bottom: 1em !important;
}

/* Alternative: Add margin-top to hero image if button selector doesn't work */
.page-id-145 figure:has(.wp-image-102) {
    margin-top: 1em !important;
}

/* ========================================
   HOMEPAGE #guide-content: SPACING BETWEEN EMAIL BUTTON AND HERO IMAGE
   ======================================== */

/* Add spacing between "Email me a PDF" button and hero image in fetched guide content */
.page-id-5 #guide-content.page-id-145 .wp-block-buttons:has(a[href*="cat-shelf-guide/email"]) {
    margin-bottom: 1em !important;
}

/* Alternative: Add margin-top to hero image if button selector doesn't work */
.page-id-5 #guide-content.page-id-145 figure:has(.wp-image-102) {
    margin-top: 1em !important;
}

/* ========================================
   DARK MODE - ALL PAGES INCLUDING PRODUCTS
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Apply to all page types */
    body,
    .site,
    .entry-content,
    article {
        background-color: #0d0d0d !important;
        color: #f0f0f0 !important;
    }

    /* Invert logos to white - ALL PAGES */
    img[src*="logo"],
    .site-logo img,
    .site-branding img,
    .custom-logo,
    img.wp-image-318 {
        filter: brightness(0) invert(1) !important;
    }

    /* Navigation background - ALL PAGES */
    .site-header,
    .site-top-header,
    .site-main-header,
    .header-navigation,
    nav,
    .primary-navigation,
    .site-header-wrap,
    #masthead,
    .wp-block-template-part {
        background-color: #0d0d0d !important;
    }

    /* Navigation links - ALL PAGES */
    .site-header a,
    .header-navigation a,
    .primary-navigation a,
    .main-navigation a,
    .wp-block-navigation a {
        color: #f0f0f0 !important;
    }

    /* Homepage buttons - white borders in dark mode */
    .page-id-5 .wp-block-button__link {
        border: 2px solid #fff !important;
    }

    /* Homepage email button in dark mode - white text and white border */
    .page-id-5 .wp-block-button__link[href="mailto:david@outdoorsavannah.com"] {
        background-color: #000 !important;
        border: 2px solid #fff !important;
        color: #fff !important;
    }

    /* Cat shelf guide email page text */
    /* Cat shelf guide email page - h2 heading only */
    #cat-guide-signup h2 {
        color: #f0f0f0 !important;
    }

    /* Homepage "Raja and David" title text - white in dark mode */
    .page-id-5 .wp-elements-b92ee61d236342985fb65b21b06b7dfe,
    .page-id-5 .wp-elements-b92ee61d236342985fb65b21b06b7dfe a {
        color: #fff !important;
    }

    /* Homepage "OutdoorSavannah LLC" title text - white in dark mode */
    .page-id-5 .wp-elements-c9ee0ef65dd5fb6ae197433570a06233 {
        color: #fff !important;
    }

    /* Swipe indicator - white in dark mode */
    .swipe-indicator {
        color: #fff !important;
    }
}

/* Mobile navigation menu - Dark mode support */
@media (prefers-color-scheme: dark) {
    /* Navigation overlay/modal background */
    .wp-block-navigation__responsive-container,
    .wp-block-navigation__responsive-dialog {
        background-color: #0d0d0d !important;
        color: #f0f0f0 !important;
    }

    /* Navigation menu items in overlay */
    .wp-block-navigation__responsive-container .wp-block-navigation__container,
    .wp-block-navigation__responsive-container-content {
        background-color: #0d0d0d !important;
    }

    /* Navigation links in mobile menu */
    .wp-block-navigation__responsive-container .wp-block-navigation-item a,
    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        color: #f0f0f0 !important;
    }

    /* Close button (X) in mobile menu */
    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-close svg {
        color: #f0f0f0 !important;
        fill: #f0f0f0 !important;
    }

    /* Hamburger menu button */
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-open svg {
        color: #f0f0f0 !important;
        fill: #f0f0f0 !important;
    }

    /* Mobile navigation "Home" link - white in dark mode */
    .wp-block-navigation__container .wp-block-navigation-item:first-child .wp-block-navigation-item__label::after {
        color: #fff !important;
    }

    /* Copy link dropdown on affiliate-links page */
    .copy-dropdown {
        background: #1a1a1a !important;
        border-color: #fff !important;
    }

    .copy-dropdown-item {
        color: #f0f0f0 !important;
        border-bottom-color: #444 !important;
    }

    .copy-dropdown-item:hover {
        background: #2a2a2a !important;
    }
}


/* ========================================
   CAT SHELF GUIDE (.page-id-145)
   ======================================== */
/* Title ONLY - center and bold */
.page-id-145 h1,
.page-id-145 .entry-title,
.page-id-145 .wp-block-post-title {
    text-align: center !important;
    font-weight: 700 !important;
}

/* All other text - left aligned */
.page-id-145 .entry-content p,
.page-id-145 .entry-content ul,
.page-id-145 .entry-content ol,
.page-id-145 .entry-content div:not(.wp-block-buttons) {
    text-align: left !important;
}

/* Keep buttons centered */
.page-id-145 .wp-block-buttons {
    justify-content: center !important;
    text-align: center !important;
}

/* Cat shelf guide buttons - same height as homepage */
.page-id-145 .wp-block-button__link {
    min-width: 200px;
    font-size: 17px;
    border-radius: 4px;
    /* Fixed height matching homepage */
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Allow wrapping on very small screens */
@media (max-width: 380px) {
    .page-id-145 .wp-block-button__link {
        height: auto !important;
        max-height: none !important;
        white-space: normal !important;
    }
}

/* ========================================
   CAT SHELF GUIDE EMAIL PAGE
   ======================================== */
/* Subscribe button same height as other buttons */
#cat-guide-signup button#submitBtn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Allow wrapping on very small screens */
@media (max-width: 380px) {
    #cat-guide-signup button#submitBtn {
        height: auto !important;
        max-height: none !important;
        white-space: normal !important;
    }
}
/* Cat shelf guide email page - Center-align title */
.page-id-512 h1,
.page-id-512 .entry-title,
.page-id-512 .wp-block-post-title {
    text-align: center !important;
}

/* ========================================
   PAGE TITLES - CENTER ONLY ON CAT SHELF GUIDE
   ======================================== */

/* Default: left-aligned and bold */
h1,
.entry-title,
.wp-block-post-title,
h1.wp-block-post-title,
.page-title {
    text-align: left !important;
    font-weight: 700 !important;
}

/* Exception: center on cat-shelf-guide only */
.page-id-145 h1,
.page-id-145 .entry-title,
.page-id-145 .wp-block-post-title {
    text-align: center !important;
}

/* Secondary headings also bold */
h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
}

/* ========================================
   PRODUCT PAGES
   ======================================== */

 /* "Back to products" button - white with black text and border */
.wp-block-button.is-style-outline--2 .wp-block-button__link,
a.wp-block-button__link[href*="Back to products"],
a.wp-block-button__link[href*="#product-"] {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    /* Fixed height matching homepage */
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Allow wrapping on very small screens */
@media (max-width: 380px) {
    .wp-block-button.is-style-outline--2 .wp-block-button__link,
    a.wp-block-button__link[href*="Back to products"],
    a.wp-block-button__link[href*="#product-"] {
        height: auto !important;
        max-height: none !important;
        white-space: normal !important;
    }
}

/* Product buttons on /product listing page - mobile full width */
@media (max-width: 600px) {
    body.page-id-60 .wp-block-buttons,
    body[class*="parent-pageid-60"] .wp-block-buttons {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Product buttons - default styling with fixed height */
.page-parent .wp-block-button__link:not([href*="#product-"]),
.page-template-default .wp-block-button__link:not([href*="#product-"]),
body[class*="product"] .wp-block-button__link:not([href*="#product-"]) {
    min-width: 150px;
    font-size: 17px;
    border-radius: 4px;
    background-color: #007cba;
    color: #ffffff;
    /* Fixed height matching homepage */
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Allow wrapping on very small screens */
@media (max-width: 380px) {
    .page-parent .wp-block-button__link:not([href*="#product-"]),
    .page-template-default .wp-block-button__link:not([href*="#product-"]),
    body[class*="product"] .wp-block-button__link:not([href*="#product-"]) {
        height: auto !important;
        max-height: none !important;
        white-space: normal !important;
    }
}

.page-parent .wp-block-button__link:hover,
.page-template-default .wp-block-button__link:hover,
body[class*="product"] .wp-block-button__link:hover {
    background-color: #006ba1;
}

/* ========================================
   NAVIGATION - HORIZONTAL ON DESKTOP
   ======================================== */

/* Desktop navigation - horizontal layout */
@media (min-width: 782px) {
    .wp-block-navigation__container,
    .wp-block-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 1.5rem !important;
    }

    .wp-block-navigation-item {
        display: inline-block !important;
    }
}

/* ========================================
   HEADER SPACING REDUCTION
   ======================================== */

/* Desktop: Reduce header vertical padding */
.site-header,
.wp-block-group.site-header {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Mobile: Even more compact header */
@media (max-width: 781px) {
    .site-header,
    .wp-block-group.site-header {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* Override any inline styles on header */
div.site-header[style*="padding"] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

@media (max-width: 781px) {
    div.site-header[style*="padding"] {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* ========================================
   AFFILIATE LINKS PAGE (.page-id-861)
   ======================================== */

/* Center the "Affiliate Links" main heading */
#shop-title {
    text-align: center !important;
}

/* Center product names (h3 headings) */
.page-id-861 .wp-block-media-text__content h3,
.page-id-861 .wp-block-media-text__content .wp-block-heading {
    text-align: center !important;
}

/* Mobile: Hide desktop copy button, show mobile copy button */
@media (max-width: 600px) {
    .copy-btn-desktop { display: none !important; }
    .copy-btn-mobile { display: block !important; }
    .wp-block-media-text__media {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        margin: 0 auto !important;
    }
    .wp-block-media-text__media figure {
        position: relative !important;
        display: inline-block !important;
    }
}

/* ========================================
   WP BLOCK MEDIA TEXT - GRID LAYOUT
   ======================================== */

/* Base styling for wp-block-media-text to ensure grid layout works */
.wp-block-media-text {
    display: grid !important;
    grid-template-columns: 30% auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    grid-template-areas: "media-text-media media-text-content" !important;
    gap: 1em !important;
}

.wp-block-media-text__media {
    grid-area: media-text-media !important;
    margin: 0 !important;
}

.wp-block-media-text__content {
    grid-area: media-text-content !important;
    padding: 0 8% !important;
    word-break: break-word !important;
}

/* Make sure images don't overflow */
.wp-block-media-text__media img {
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
    display: block !important;
}

/* Copy link dropdown styling */
.copy-dropdown {
    position: absolute;
    background: white;
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
    min-width: 200px;
}

.copy-dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

.copy-dropdown-item:last-child {
    border-bottom: none;
}

.copy-dropdown-item:hover {
    background: #f0f0f0;
}

/* ========================================
   DESKTOP: CONSTRAIN IMAGES AND TEXT ON NON-HOME PAGES
   ======================================== */

/* Target all pages except homepage (.page-id-5) */
@media (min-width: 782px) {
    /* Constrain main content container width on non-home pages and center it */
    body:not(.page-id-5) .entry-content.is-layout-constrained,
    body:not(.page-id-5) .wp-block-post-content.is-layout-constrained {
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Constrain images on non-home pages to 50% of text box width (400px = 50% of 800px) */
    body:not(.page-id-5) .wp-block-image:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) .entry-content:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) .wp-block-post-content:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) figure:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) picture:not(.alignfull):not(.alignwide) img {
        max-width: 400px !important;
        height: auto !important;
    }

    /* Center regular images on non-home pages */
    body:not(.page-id-5) .wp-block-image:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
    body:not(.page-id-5) figure:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========================================
   DESKTOP: CONSTRAIN IMAGES AND TEXT ON NON-HOME PAGES
   ======================================== */

/* Target all pages except homepage (.page-id-5) */
@media (min-width: 782px) {
    /* Constrain main content container width on non-home pages and center it */
    body:not(.page-id-5) .entry-content.is-layout-constrained,
    body:not(.page-id-5) .wp-block-post-content.is-layout-constrained {
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Constrain images on non-home pages to 50% of text box width (400px = 50% of 800px) */
    body:not(.page-id-5) .wp-block-image:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) .entry-content:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) .wp-block-post-content:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) figure:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) picture:not(.alignfull):not(.alignwide) img {
        max-width: 400px !important;
        height: auto !important;
    }

    /* Center regular images on non-home pages */
    body:not(.page-id-5) .wp-block-image:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
    body:not(.page-id-5) figure:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========================================
   DESKTOP: CONSTRAIN IMAGES AND TEXT ON NON-HOME PAGES
   ======================================== */

/* Target all pages except homepage (.page-id-5) */
@media (min-width: 782px) {
    /* Constrain main content container width on non-home pages and center it */
    body:not(.page-id-5) .entry-content.is-layout-constrained,
    body:not(.page-id-5) .wp-block-post-content.is-layout-constrained {
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Constrain images on non-home pages to 50% of text box width (400px = 50% of 800px) */
    body:not(.page-id-5) .wp-block-image:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) .entry-content:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) .wp-block-post-content:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) figure:not(.alignfull):not(.alignwide) img,
    body:not(.page-id-5) picture:not(.alignfull):not(.alignwide) img {
        max-width: 400px !important;
        height: auto !important;
    }

    /* Center regular images on non-home pages */
    body:not(.page-id-5) .wp-block-image:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
    body:not(.page-id-5) figure:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========================================
   HOMEPAGE: CONSTRAIN FETCHED GUIDE CONTENT (#guide-content)
   ======================================== */

/* Override CSS variable and constrain #guide-content to match cat-shelf-guide page */
@media (min-width: 782px) {
    /* Override CSS variable for #guide-content and ALL descendants */
    .page-id-5 #guide-content.page-id-145,
    .page-id-5 #guide-content.page-id-145 * {
        --wp--style--global--content-size: 800px !important;
        --wp--style--global--wide-size: 800px !important;
    }

    /* Target the container itself */
    .page-id-5 #guide-content.page-id-145 {
        max-width: 800px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Target ALL direct children and nested content containers */
    .page-id-5 #guide-content.page-id-145 > *,
    .page-id-5 #guide-content.page-id-145 .entry-content,
    .page-id-5 #guide-content.page-id-145 .wp-block-post-content,
    .page-id-5 #guide-content.page-id-145 .entry-content.is-layout-constrained,
    .page-id-5 #guide-content.page-id-145 .wp-block-post-content.is-layout-constrained {
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Override WordPress default .is-layout-constrained behavior */
    .page-id-5 #guide-content.page-id-145 .is-layout-constrained,
    .page-id-5 #guide-content.page-id-145 .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 800px !important;
    }

    /* Match image constraints - target ALL images */
    .page-id-5 #guide-content.page-id-145 img:not(.alignfull):not(.alignwide),
    .page-id-5 #guide-content.page-id-145 .wp-block-image:not(.alignfull):not(.alignwide) img,
    .page-id-5 #guide-content.page-id-145 figure:not(.alignfull):not(.alignwide) img,
    .page-id-5 #guide-content.page-id-145 picture:not(.alignfull):not(.alignwide) img {
        max-width: 400px !important;
        height: auto !important;
    }

    /* Center regular images and image containers */
    .page-id-5 #guide-content.page-id-145 .wp-block-image:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
    .page-id-5 #guide-content.page-id-145 figure:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* Button container should match hero image size (500px), not full width */
    .page-id-5 #guide-content.page-id-145 .wp-block-buttons {
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Captions should match image width (400px) */
    .page-id-5 #guide-content.page-id-145 figcaption,
    .page-id-5 #guide-content.page-id-145 .wp-block-image figcaption,
    .page-id-5 #guide-content.page-id-145 figure figcaption,
    .page-id-5 #guide-content.page-id-145 .wp-element-caption {
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}



/* ========================================
   MOST-VIEWED-CAT-VIDEO PAGE: TABLE MOBILE RESPONSIVE
   ======================================== */

/* Table wrapper for horizontal scrolling on mobile */
.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1em 0;
    display: block;
}

.wp-block-table > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1em;
    padding: 0 1em;
}

/* Ensure table maintains minimum width on mobile */
.wp-block-table table {
    min-width: 600px;
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Allow normal text wrapping in table cells */
.wp-block-table td,
.wp-block-table th {
    white-space: normal;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Allow wrapping in strong elements but prevent breaking within numbers */
.wp-block-table td strong,
.wp-block-table th strong {
    white-space: normal;
    /* Break at spaces but not within number sequences */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Use a CSS trick: prevent breaking within sequences of digits and punctuation */
/* Numbers with commas/periods should stay together, text can wrap at spaces */
.wp-block-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* First column (Platform) can wrap normally */
.wp-block-table td:first-child,
.wp-block-table th:first-child {
    white-space: normal;
    min-width: 100px;
}

/* Mobile-specific adjustments */
@media (max-width: 600px) {
    .wp-block-table {
        margin: 1em -1em;
        padding: 0 1em;
    }

    .wp-block-table table {
        min-width: 650px;
        font-size: 0.875em;
    }

    .wp-block-table td,
    .wp-block-table th {
        padding: 10px 6px !important;
        white-space: normal;
        word-break: break-word;
    }

    /* First column (Platform) can wrap on mobile */
    .wp-block-table td:first-child,
    .wp-block-table th:first-child {
        white-space: normal;
        min-width: 80px;
        max-width: 120px;
    }

    /* Totals row - allow wrapping but keep numbers intact */
    .wp-block-table tr:last-child td {
        white-space: normal;
        padding: 12px 6px !important;
        font-size: 0.8125em;
    }

    /* Make links more touch-friendly */
    .wp-block-table a {
        display: inline-block;
        padding: 2px 4px;
        white-space: nowrap;
    }

    /* Allow normal wrapping - numbers should stay together naturally, text can wrap at spaces */
    .wp-block-table td strong,
    .wp-block-table th strong {
        white-space: normal;
        word-break: break-word;
    }
}

/* ========================================
   TIKTOK AND INSTAGRAM EMBEDS - MOBILE CONSTRAINTS
   ======================================== */

/* Constrain embed wrappers on mobile - override inline styles */
@media (max-width: 781px) {
    /* TikTok embed wrapper - target divs containing tiktok-embed */
    div:has(.tiktok-embed),
    center > div:has(.tiktok-embed) {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        padding-left: 1em !important;
        padding-right: 1em !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Instagram embed wrapper - target divs containing instagram-media */
    div:has(.instagram-media) {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        padding-left: 1em !important;
        padding-right: 1em !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* TikTok embed blockquote - override inline styles */
    .tiktok-embed,
    blockquote.tiktok-embed {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    
    /* Instagram embed blockquote - override inline styles */
    .instagram-media,
    blockquote.instagram-media {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    
    /* Ensure center wrapper doesn't cause overflow */
    center:has(div:has(.tiktok-embed)),
    center:has(div:has(.instagram-media)),
    center {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent body/html overflow on mobile */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* hide all captions by default, show only when needed */
.page-id-1143 .wp-element-caption {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  word-wrap: normal !important;
}

/* Hide caption for wp-image-1047 in guide-content */
.page-id-5 #guide-content.page-id-145 figure:has(.wp-image-1047) .wp-element-caption,
.page-id-145 figure:has(.wp-image-1047) .wp-element-caption {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  word-wrap: normal !important;
}

/* Ensure figure doesn't create stacking context issues */
.page-id-1143 figure:has(.wp-element-caption) {
  position: relative;
}

/* Prevent any blur or overlay effects on image */
 .page-id-1143 figure:has(.wp-element-caption) img,
figure:has(.wp-element-caption) picture {
  position: relative;
  z-index: 1;
}

/* ========================================
   MOST-VIEWED-CAT-VIDEO PAGE: FAQ SECTION
   ======================================== */

.faq-container {
  max-width: 800px;
  margin: 2em auto;
}

.faq-item {
  margin-bottom: 1.5em;
  padding: 1.5em;
  background: #f8f9fa;
  border-left: 4px solid #007cba;
  border-radius: 4px;
  transition: box-shadow 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.faq-question {
  margin: 0 0 0.75em 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.faq-answer {
  margin: 0;
  color: #555;
  line-height: 1.6;
}

.faq-answer strong {
  color: #007cba;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .faq-container {
    margin: 1.5em 0;
  }

  .faq-item {
    padding: 1.25em;
    margin-bottom: 1.25em;
  }

  .faq-question {
    font-size: 1rem;
  }

  .faq-answer {
    font-size: 0.9375rem;
  }
}

/* Dark mode support for FAQ */
@media (prefers-color-scheme: dark) {
  .faq-item {
    background: #1a1a1a !important;
    border-left-color: #4a9eff !important;
  }

  .faq-item:hover {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1) !important;
  }

  .faq-question {
    color: #f0f0f0 !important;
  }

  .faq-answer {
    color: #d0d0d0 !important;
  }

  .faq-answer strong {
    color: #4a9eff !important;
  }
}