/* Post Manager add-on pack: Elements (the website). Colours follow the site's --accent; type follows the page. A site can
   tune them with --pm-el-accent, --pm-el-head-font and --pm-hero-height. */
.pm-el-icon, .pm-ih__icon, .pm-btn__icon, .pm-il__icon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.125em; }

/* Page header: picture beside the title over a faded background picture */
.pm-hero { position: relative; overflow: hidden; margin: 0 0 2em; background: var(--cloud, #f4f4f4); min-height: var(--pm-hero-height, 300px); display: flex; align-items: center; }
.pm-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; }
.pm-hero::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, var(--pm-hero-veil, .62)); pointer-events: none; }   /* the picture shows through a white veil, as Elementor's overlay did */
.pm-hero--plain::after { display: none; }
.pm-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); width: 100%; padding: clamp(16px, 3vw, 28px) clamp(16px, 5vw, 80px); box-sizing: border-box; }
.pm-hero--right .pm-hero__inner { flex-direction: row-reverse; }
.pm-hero__pic { width: clamp(140px, 24vw, 340px); height: auto; flex: none; margin: 0; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .12)); }
.pm-hero__text { min-width: 0; }
.pm-hero__title { margin: 0 0 .45em; font: 600 clamp(24px, 3vw, 38px)/1.15 var(--pm-el-head-font, var(--f-head, inherit)); text-transform: uppercase; letter-spacing: .01em; color: var(--pm-el-accent, var(--accent, #8b1a1a)); }
.pm-hero__lead { margin: 0; font-size: .95em; line-height: 1.6; color: var(--body, #555); max-width: 62em; }
@media (max-width: 640px) {
  .pm-hero__inner, .pm-hero--right .pm-hero__inner { flex-direction: column; align-items: flex-start; }
  .pm-hero__pic { width: 150px; }
}

/* Icon heading */
.pm-ih { display: flex; align-items: center; gap: .45em; scroll-margin-top: 90px; }
.pm-ih.pm-ih--accent { color: var(--pm-el-accent, var(--accent, #8b1a1a)); }   /* two classes: beats a site's ".prose h2" colour */
.pm-ih__icon { width: 1.2em; height: 1.2em; }
.pm-ih--h2 { font-family: var(--pm-el-head-font, var(--f-head, inherit)); font-weight: 600; }

/* Button */
.pm-btn-row { margin: 1.2em 0; }
.pm-btn-row--center { text-align: center; }
.pm-btn { display: inline-flex; align-items: center; gap: .5em; padding: .65em 1.15em; border-radius: 3px; font-size: .9em; font-weight: 600; line-height: 1.2; text-decoration: none !important;
  border: 2px solid var(--pm-el-accent, var(--accent, #8b1a1a)); transition: background-color .15s, color .15s; }
.pm-btn--solid { background: var(--pm-el-accent, var(--accent, #8b1a1a)); color: #fff !important; }
.pm-btn--solid:hover, .pm-btn--solid:focus-visible { background: var(--pm-el-accent-dark, var(--burgundy-deep, #5e0f0f)); border-color: var(--pm-el-accent-dark, var(--burgundy-deep, #5e0f0f)); }
.pm-btn--outline { background: transparent; color: var(--pm-el-accent, var(--accent, #8b1a1a)) !important; }
.pm-btn--outline:hover, .pm-btn--outline:focus-visible { background: var(--pm-el-accent, var(--accent, #8b1a1a)); color: #fff !important; }
.pm-btn:focus-visible { outline: 3px solid var(--pm-el-accent, var(--accent, #8b1a1a)); outline-offset: 2px; }

/* Icon list */
.pm-il { list-style: none; margin: 1em 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.pm-il--inline { flex-direction: row; flex-wrap: wrap; gap: .6em 1.4em; }
.pm-il li { margin: 0; padding: 0; display: flex; }
.pm-il li::before { content: none; }
.pm-il a, .pm-il li > span { display: inline-flex; align-items: center; gap: .5em; }
.pm-il__icon { width: 1.25em; height: 1.25em; color: var(--pm-el-accent, var(--accent, #8b1a1a)); }
.pm-il a { text-decoration: none; }
.pm-il a:hover span { text-decoration: underline; }

/* Columns */
.pm-cols { display: grid; gap: 1.2em 2.4em; margin: 1em 0; }
.pm-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-cols__col > :first-child { margin-top: 0; }
.pm-cols__col > :last-child { margin-bottom: 0; }
@media (max-width: 700px) { .pm-cols--2, .pm-cols--3 { grid-template-columns: 1fr; } }
.pm-cols__col--icon .pm-cols__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25em; color: var(--pm-el-accent, var(--accent, #8b1a1a)); }
.pm-cols__mark { display: flex; align-items: center; gap: .6em; width: 100%; color: var(--pm-el-accent, var(--accent, #8b1a1a)); }
.pm-cols__mark::before, .pm-cols__mark::after { content: ""; flex: 1; height: 2px; background: currentColor; }
.pm-cols__icon { width: 1.1em; height: 1.1em; }
@media (prefers-reduced-motion: reduce) { .pm-btn { transition: none; } }