/* =========================================
   LUCID INTERIOR DESIGN
   BLACK BACKGROUND / WHITE TEXT
   ========================================= */

/* 1. MAIN SITE AND THEME BACKGROUNDS */

html,
body,
#page,
#content,
#primary,
#main,
.site,
.site-content,
.site-main,
.content-area,
.site-header,
.site-footer,
.site-branding,
.entry,
.hentry,
.post,
.page,
article,
main,
section,
.wp-site-blocks,
.wp-block-group,
.wp-block-post-content,
.wp-block-template-part {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 2. ALL POSTS AND PAGE CONTENT */

.entry-content,
.entry-header,
.entry-footer,
.entry-summary,
.post-content,
.page-content,
.post-inner,
.entry-inner,
.single-post,
.single,
.blog,
.archive,
.widget-area,
.sidebar,
.comments-area,
.comment-body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 3. ALL HEADINGS AND BODY TEXT */

body,
p,
h1, h2, h3, h4, h5, h6,
li,
span,
blockquote,
figcaption,
.wp-block-post-title,
.entry-title,
.page-title,
.site-title,
.site-description,
.wp-block-site-title,
.wp-block-site-tagline {
    color: #ffffff !important;
}

/* 4. LINKS AND NAVIGATION */

a,
a:visited,
.site-title a,
.entry-title a,
nav a,
.menu a,
.wp-block-navigation a {
    color: #ffffff !important;
}

a:hover,
a:focus {
    color: #bbbbbb !important;
}

/* 5. WORDPRESS IMAGE GALLERIES */

.gallery,
.gallery-item,
.gallery-icon,
.gallery-caption,
.wp-block-gallery,
.wp-block-image,
.wp-block-gallery .wp-block-image,
.blocks-gallery-grid,
.blocks-gallery-item,
figure,
.wp-block-cover,
.wp-block-media-text {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 6. MOSAIC AND TILED GALLERIES */

.tiled-gallery,
.tiled-gallery__gallery,
.tiled-gallery__row,
.tiled-gallery__col,
.tiled-gallery__item,
.tiled-gallery-item,
.tiled-gallery-caption,
.jetpack-gallery,
.wp-block-jetpack-tiled-gallery,
.justified-gallery,
.justified-gallery > div,
.mosaic-gallery,
.gallery-mosaic {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 7. REMOVE WHITE CONTENT PANELS */

.site-content .container,
.site-content .wrapper,
.content-wrapper,
.content-container,
.entry-content > div,
.wp-block-columns,
.wp-block-column,
.wp-block-post,
.wp-block-query,
.wp-block-query-loop,
.wp-block-cover__inner-container {
    background-color: #000000 !important;
}

/* 8. HEADER, FOOTER AND MENU */

header,
footer,
.site-navigation,
.main-navigation,
.primary-navigation,
.menu,
.nav-menu,
.wp-block-navigation,
.widget,
.widget-area {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 9. IMAGE CAPTIONS AND META TEXT */

figcaption,
.gallery-caption,
.wp-caption-text,
.entry-meta,
.post-meta,
.wp-block-post-date,
.wp-block-post-excerpt {
    color: #ffffff !important;
}

/* 10. FORMS AND SEARCH */

input,
textarea,
select,
button {
    background-color: #111111;
    color: #ffffff;
    border-color: #555555;
}

input::placeholder,
textarea::placeholder {
    color: #aaaaaa;
}

/* 11. PREVENT WHITE GAPS */

body,
.site,
.site-content,
.site-main,
#content,
#main {
    min-height: 100%;
    background: #000000 !important;
}

/* 12. PRESERVE IMAGE APPEARANCE */

img,
video,
iframe {
    background-color: transparent;
}

/* ======================================
   METASLIDER GALLERY - BLACK BACKGROUND
   ====================================== */

/* Main MetaSlider gallery and slideshow */
.metaslider,
.metaslider .flexslider,
.metaslider .slides,
.metaslider .slides > li,
.metaslider .flex-viewport,
.metaslider .rslides,
.metaslider .nivoSlider,
.metaslider .coin-slider,
.metaslider-gallery,
.ml-gallery,
.ml-gallery-container,
.ml-gallery-grid {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Gallery wrappers and image containers */
.metaslider .slides li,
.metaslider .flexslider .slides,
.metaslider .flex-viewport,
.ml-gallery figure,
.ml-gallery-item,
.ml-gallery-image {
    background-color: #000000 !important;
}

/* MetaSlider Gallery lightbox */
.ml-lightbox,
.ml-lightbox-overlay,
.ml-lightbox-container,
.ml-lightbox-content,
.ml-lightbox-enabled,
[class*="ml-lightbox"] {
    background-color: #000000 !important;
}

/* Gallery captions and text */
.metaslider .caption-wrap,
.metaslider .caption,
.ml-gallery figcaption,
.ml-lightbox figcaption {
    color: #ffffff !important;
}

/* Gallery parent content */
.entry-content:has(.metaslider),
.entry-content:has(.ml-gallery),
.wp-block-group:has(.metaslider),
.wp-block-group:has(.ml-gallery) {
    background-color: #000000 !important;
}

/* ====================================
   METASLIDER GALLERY - BLACK EDGES
   ==================================== */

/* MetaSlider and MetaGallery containers */
.metaslider,
.metaslider-gallery,
.metagallery,
.ml-gallery,
[class*="metagallery"],
[class*="meta-gallery"] {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Gallery outer wrappers */
.metaslider-wrapper,
.metagallery-wrapper,
.gallery-wrapper,
.gallery-container,
[class*="metagallery"] > div,
[class*="meta-gallery"] > div {
    background-color: #000000 !important;
}

/* WordPress content surrounding gallery */
.entry-content,
.page-content,
.site-content,
.wp-block-shortcode,
.wp-block-group,
.wp-block-columns,
.wp-block-column {
    background-color: #000000 !important;
}

/* Preserve black spacing between images */
[class*="metagallery"] figure,
[class*="metagallery"] .gallery-item {
    background-color: #000000 !important;
}


/* MetaSlider gallery grid background */
[class*="metagallery"] [class*="grid"],
[class*="metagallery"] [class*="masonry"],
[class*="metagallery"] [class*="container"],
[class*="metagallery"] [class*="wrapper"] {
    background-color: #000000 !important;
}


/* ==========================================
   LUCID INTERIOR DESIGN
   FIX WHITE MARGINS ON GALLERY PAGE 1532
   ========================================== */

/* Make gallery page and wrappers black */
body.page-id-1532,
body.page-id-1532 #page,
body.page-id-1532 #content,
body.page-id-1532 #primary,
body.page-id-1532 #main,
body.page-id-1532 article,
body.page-id-1532 .post-wrapper,
body.page-id-1532 .entry-content,
body.page-id-1532 .page-content {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Remove the Stratum theme's 60px
   padding around the gallery page */

@media screen and (min-width: 860px) {
    body.page-id-1532.boxed .post-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Ensure the gallery itself is black */

body.page-id-1532 .metaslider,
body.page-id-1532 [class*="metagallery"],
body.page-id-1532 [class*="meta-gallery"] {
    background-color: #000000 !important;
}


/* Reduce space above gallery on page 1532 */
body.page-id-1532 .post-wrapper {
    padding-top: 20px !important;
}


/* Keep elegant black margins around About text */
@media screen and (min-width: 860px) {
    body.page-id-16.boxed .post-wrapper {
        padding: 60px !important;
        background-color: #000000 !important;
    }
}

/* STRATUM THEME - ALL PAGES BLACK */

body.page .post-wrapper,
body.page .page-content,
body.page .entry-content,
body.page article,
body.page .site-content,
body.page .content-area {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* White text throughout pages */
body.page .entry-content p,
body.page .entry-content h1,
body.page .entry-content h2,
body.page .entry-content h3,
body.page .entry-content h4,
body.page .entry-content li {
    color: #ffffff !important;
}

/* ==========================================
   LUCID INTERIOR DESIGN
   REMOVE COMMENTS SITE-WIDE
   ========================================== */

/* Hide comment forms, comments and headings */
#comments,
.comments-area,
.comment-respond,
#respond,
.comment-form,
.comments-title,
.comment-list,
.comment-reply-title,
.comment-navigation,
.comments-link,
.post-comments,
.entry-comments,
#reply-title {
    display: none !important;
}

/* Hide Stratum theme comment containers */
.boxed .entry-comments,
.boxed .comment-respond,
.boxed .comments-area {
    display: none !important;
}


/* ==========================================
   LUCID INTERIOR DESIGN
   HEADER TO CONTENT SPACING - SITE-WIDE
   ========================================== */

/* DESKTOP: screens 1025px and wider */

@media screen and (min-width: 1025px) {

    /* Reduce space below header */
    .site-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Remove excess space above main content */
    #content,
    .site-content,
    #primary,
    #main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Set consistent 30px spacing
       above page and post content */
    .boxed .post-wrapper {
        padding-top: 30px !important;
    }

    /* Remove additional top margins */
    .entry-content,
    .page-content {
        margin-top: 0 !important;
    }

    /* Prevent first content element
       from adding extra top space */
    .entry-content > :first-child,
    .page-content > :first-child {
        margin-top: 0 !important;
    }
}

/* TABLET: 768px to 1024px */

@media screen and (min-width: 768px)
and (max-width: 1024px) {

    .site-header {
        margin-bottom: 0 !important;
    }

    #content,
    .site-content {
        margin-top: 0 !important;
    }

    .boxed .post-wrapper {
        padding-top: 75px !important;
    }
}

/* MOBILE: screens under 768px */

@media screen and (max-width: 767px) {

    /* Preserve mobile navigation space */
    .site-header {
        margin-bottom: 0 !important;
    }

    /* Allow room for hamburger menu */
    .site-content {
        margin-top: 0 !important;
    }

    .boxed .post-wrapper {
        padding-top: 85px !important;
    }

    /* Keep first content element aligned */
    .entry-content > :first-child {
        margin-top: 0 !important;
    }
}