/* Colibri: the parts of the live theme that its JavaScript drew with inline styles, as CSS, plus no-JS fallbacks.
   Loaded after the theme stylesheet (main.css) and the blog's customizer CSS (theme.css). */

/* the header overlaps the hero; colibri.js sets the exact padding, this is the same value before/without it */
html.colibri-wp-theme .h-navigation-padding { padding-top: 80px; }
@media (max-width: 767px) { html.colibri-wp-theme .h-navigation-padding { padding-top: 76px; } }

/* sticky navigation: the theme stylesheet styles .h-navigation_sticky (white, shadow); the script only adds the class */
html.colibri-wp-theme .h-navigation_sticky { position: fixed; left: 0; width: 100%; z-index: 9999; }

/* offcanvas menu: closed by default; opened by colibri.js (.open) or, without the script, by the #fragment of the hamburger link */
html.colibri-wp-theme .h-offcanvas-panel { display: none; }
html.colibri-wp-theme .h-offcanvas-panel.open,
html.colibri-wp-theme .h-offcanvas-panel:target { display: block; }
html.colibri-wp-theme.no-scroll { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html.colibri-wp-theme .h-offcanvas-panel.open { animation: colibri-slide-in 0.3s ease-out; }
  @keyframes colibri-slide-in { from { transform: translateX(100%); } to { transform: none; } }
}

/* the export drops the <p> WordPress wraps around a standalone image; the paragraph's 16px bottom margin goes with it.
   Same spacing back, only for an <img> that is a direct child of the body (an image inside a <p> already has it). */
html.colibri-wp-theme #colibri .colibri-post-content > img,
html.colibri-wp-theme #colibri .colibri-page-content .page > div > img { margin-bottom: 16px; }