/* ===================================================================== Content surface — single Posts / Pages while a Theme Background Image is set. See inc/content-surface.php for the full explanation. Loaded ONLY when carries .gzfc-content-surface, so with no background image (or on the homepage / archives) none of this exists. Layer 1 (outer) : Theme Background Image on — untouched Layer 2 (surface) : .gzf-content-area on single Post/Page — this file The sidebar (get_sidebar()) is a sibling of .gzf-content-area and the footer sits outside .gzf-layout, so neither is affected. Colour comes from the EXISTING Colors > Surface setting via --gzf-color-surface (which the Dark / Light toggle also swaps). ===================================================================== */ body.gzfc-content-surface .gzf-content-area { /* Its own stacking level, so nothing from the background layer (fixed image, overlay pseudo-elements) can ever paint over it. */ position: relative; z-index: 1; box-sizing: border-box; min-width: 0; max-width: 100%; /* Wrap to its own content instead of stretching to the sidebar's height, which would leave an empty panel below a short article. */ align-self: flex-start; padding: var(--gzfc-content-pad, 32px); background: var(--gzfc-content-surface-bg, var(--gzf-color-surface, #141417)); border: 1px solid var(--gzf-color-border, rgba(255, 255, 255, .07)); border-radius: var(--gzfc-content-radius, 14px); overflow-wrap: break-word; } /* The panel's padding replaces the first / last element's outer margin, so the spacing at the top and bottom edge isn't doubled. */ body.gzfc-content-surface .gzf-content-area > :first-child { margin-top: 0; } body.gzfc-content-surface .gzf-content-area > :last-child { margin-bottom: 0; } /* Keep everything inside the surface: media never wider than the panel, and full-bleed / wide editor blocks can't escape it over the image. */ body.gzfc-content-surface .gzf-content-area img, body.gzfc-content-surface .gzf-content-area video, body.gzfc-content-surface .gzf-content-area iframe, body.gzfc-content-surface .gzf-content-area embed, body.gzfc-content-surface .gzf-content-area object { max-width: 100%; } body.gzfc-content-surface .gzf-content-area img, body.gzfc-content-surface .gzf-content-area video { height: auto; } body.gzfc-content-surface .gzf-content-area pre { max-width: 100%; overflow-x: auto; } body.gzfc-content-surface .gzf-content-area .alignfull, body.gzfc-content-surface .gzf-content-area .alignwide { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; } /* --- Tablet --------------------------------------------------------- */ @media (max-width: 1024px) { body.gzfc-content-surface .gzf-content-area { padding: var(--gzfc-content-pad-tablet, 24px); border-radius: var(--gzfc-content-radius-tablet, 12px); } } /* --- Mobile --------------------------------------------------------- */ @media (max-width: 600px) { body.gzfc-content-surface .gzf-content-area { padding: var(--gzfc-content-pad-mobile, 16px); border-radius: var(--gzfc-content-radius-mobile, 10px); } }