/* SJP v2.7: site-wide front-end typography. Applies to normal theme pages,
 * Elementor templates and standalone SJP pages. No WordPress admin styling.
 * Manrope is the first choice, DM Sans the first fallback. */
:root { --sjpc-site-font:'Manrope','DM Sans',sans-serif; }
html body:not(.wp-admin) {
  font-family:var(--sjpc-site-font)!important;
}
html body:not(.wp-admin) :is(
  h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,select,option,
  label,li,blockquote,th,td,dt,dd,summary,small,strong,em,
  .sjpc,.sjpc-wp-nav,.sjpc-kicker,
  .elementor-heading-title,.elementor-button,.elementor-button-text,
  .elementor-widget-text-editor,.elementor-widget-container,
  .elementor-nav-menu,.elementor-nav-menu a,
  .wp-block-button__link,.wp-block-navigation-item__label
) {
  font-family:var(--sjpc-site-font)!important;
}
/* Elementor's own typography rules sometimes have a higher specificity. */
html body:not(.wp-admin) .elementor .elementor-element :is(
  .elementor-heading-title,.elementor-button,.elementor-button-text,
  .elementor-widget-text-editor,.elementor-nav-menu a,
  .elementor-nav-menu .elementor-item,.elementor-nav-menu .sub-arrow
) {font-family:var(--sjpc-site-font)!important;}
/* Preserve Font Awesome, Elementor, WordPress and other icon glyphs. */
html body:not(.wp-admin) .fa {font-family:FontAwesome!important;}
/* Never override the font families of Font Awesome 5/6, Elementor eicons,
 * WordPress dashicons or Material icons: these rules only style text. */
html body:not(.wp-admin) .sjpc-wp-nav .sjpc-menu-chevron .fa {
  font-family:FontAwesome!important;
}
/* Where Elementor already defines an explicit photograph frame, preserve its
   frame size and crop the image centre-centre. Never create an artificial frame
   for an unframed Elementor image or the site logo. */
html body:not(.wp-admin) :is(
  .elementor-post__thumbnail,
  .elementor-portfolio-item__img
) {position:relative;overflow:hidden;}
html body:not(.wp-admin) :is(
  .elementor-post__thumbnail,
  .elementor-portfolio-item__img
) img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
