/**
 * vfk-embed.css — strips theme chrome under the body.vfk-embedded class
 * applied by VFK_Embed when ?embed=1 is present on the request.
 *
 * v6.0.5: REWRITTEN — the v6.0.0 version used bare tag selectors
 * (header, footer, aside) and overly generic class selectors
 * (.entry-title, .container, .wrap) that wiped out legitimate page
 * content along with theme chrome. The map iframe rendered as a
 * blank page because the theme wrapped its content in a <header>
 * element (Newspiper does this) — which matched our `body.vfk-embedded
 * header { display: none }` rule and disappeared.
 *
 * New approach: target only DIRECT CHILDREN of <body> (the top-level
 * structural elements that themes use for chrome) and well-known WP
 * structural classes. Don't touch anything that could be inside the
 * shortcode's own output. The shortcode renders inside the theme's
 * content area, which is the only thing we want visible.
 *
 * Hiding rules:
 *   - Direct body > header / footer / nav / aside  (top-level only)
 *   - WordPress admin bar
 *   - Well-known theme chrome IDs (#wpadminbar, #masthead, #colophon, #site-header, #site-footer)
 *   - Sidebar widget areas (.sidebar, .widget-area as direct body > children)
 *
 * Intentionally NOT hidden:
 *   - Bare `<header>` / `<footer>` anywhere (matched content elements)
 *   - `.entry-title` (some themes hide their main page title here)
 *   - `.container` / `.wrap` (themes use these for content too)
 *   - `<aside>` not at top-level (could be content callouts)
 */

body.vfk-embedded {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* WordPress admin bar */
body.vfk-embedded #wpadminbar { display: none !important; }
body.vfk-embedded.admin-bar { padding-top: 0 !important; }
html[class*="wp-toolbar"] body.vfk-embedded { padding-top: 0 !important; margin-top: 0 !important; }

/* Theme chrome: top-level structural elements only (direct children
 * of <body>). Themes that wrap their site header in a <header> tag
 * directly inside <body> get caught; themes that nest a <header>
 * inside their content article do not. This is the safe trade-off. */
body.vfk-embedded > header,
body.vfk-embedded > footer,
body.vfk-embedded > nav,
body.vfk-embedded > aside {
    display: none !important;
}

/* Well-known theme chrome IDs. These are WordPress conventions
 * (e.g. _s starter theme, TwentyTwenty, Astra). Targeting by ID is
 * safer than tag because IDs don't collide with content elements. */
body.vfk-embedded #wpadminbar,
body.vfk-embedded #masthead,
body.vfk-embedded #colophon,
body.vfk-embedded #site-header,
body.vfk-embedded #site-footer,
body.vfk-embedded #header,
body.vfk-embedded #footer,
body.vfk-embedded #sidebar,
body.vfk-embedded #secondary {
    display: none !important;
}

/* Some themes use class selectors on direct body children for chrome.
 * Restrict these to direct-child to avoid hiding similarly-named
 * elements inside content. */
body.vfk-embedded > .site-header,
body.vfk-embedded > .site-footer,
body.vfk-embedded > .main-header,
body.vfk-embedded > .main-footer,
body.vfk-embedded > .navbar,
body.vfk-embedded > .top-bar,
body.vfk-embedded > .sidebar,
body.vfk-embedded > .widget-area {
    display: none !important;
}

/* Some themes wrap chrome in a div that wraps a header — peel one
 * level deeper for those, but still keep selectors strict enough
 * that we don't catch content. The arrow restricts to direct children
 * of likely chrome containers. */
body.vfk-embedded > #page > header,
body.vfk-embedded > #page > footer,
body.vfk-embedded > .site > header,
body.vfk-embedded > .site > footer,
body.vfk-embedded > #wrapper > header,
body.vfk-embedded > #wrapper > footer {
    display: none !important;
}

/* The Newspiper theme (verifikitchen.com staging) wraps its body in
 * #pageWrap with .header / .footer children. */
body.vfk-embedded > #pageWrap > .header,
body.vfk-embedded > #pageWrap > .footer,
body.vfk-embedded > #pageWrap > header,
body.vfk-embedded > #pageWrap > footer {
    display: none !important;
}

/* Remove top/bottom padding from canonical WP content wrappers so the
 * shortcode output sits flush inside the iframe. Targets WP-canonical
 * IDs only — restrictive enough not to affect content. */
body.vfk-embedded #content,
body.vfk-embedded #main,
body.vfk-embedded #primary {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* v6.0.8: hide the WordPress page-title block. ".entry-header" is a
 * WP theme convention (TwentyTwenty*, Newspiper, Astra, _s, etc.) that
 * wraps the page <h1> and any meta. ".page-header" is a less common
 * sibling. ".entry-title" alone is included for themes that emit it
 * without a wrapping <header>. Safe to hide because the embedder
 * provides the contextual title via their own page chrome. */
body.vfk-embedded .entry-header,
body.vfk-embedded .page-header,
body.vfk-embedded .entry-title {
    display: none !important;
}