/* HeraPress-only rules. Anything herabackup.com could also use belongs in
   shared/css (mounted at assets/css), not here. */

/* ---- brand: the Hera mark as a CSS mask, the name as live text ---- */
.hp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); }
.hp-mark {
  flex: none; width: 44px; height: 29px; /* the mark is 1.52:1 */
  background: var(--color-accent-fill);
  -webkit-mask: url(img/hera-mark.svg) center / contain no-repeat;
          mask: url(img/hera-mark.svg) center / contain no-repeat;
}
/* The fill colour measures 6.26:1 on the light header but fails on the dark one; the text accent does not. */
html[data-theme="dark"] .hp-mark { background: var(--color-accent); }
.hp-wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: -0.02em; }
.site-header .brand-logo { height: 40px; }
.site-footer .hp-brand { color: var(--color-on-ink); }
.site-footer .hp-mark { width: 38px; height: 25px; background: var(--color-on-ink); }
.site-footer .hp-wordmark { font-size: 18px; }

/* ---- header ---- */
.skip-link { position: absolute; left: 12px; top: -120px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); font-weight: 600; }
.skip-link:focus { top: 12px; }
.header-actions .theme-toggle { margin-left: 0; width: 36px; height: 36px; font-size: 16px; }
.hp-mobile-nav { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 22px; }
.hp-mobile-link { padding: 15px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.hp-mobile-link.is-current { color: var(--color-accent); }
/* The panel has its own bottom border; a divider under the last link doubled it. */
.hp-mobile-nav > a.hp-mobile-link:last-of-type { border-bottom: 0; }
.hp-mobile-actions { display: grid; gap: 10px; margin-top: 18px; }
/* Three links fit well below the shared 1020px burger breakpoint. The shared
   CSS also hides .mega there, which would leave the Plugins button dead. */
@media (max-width: 1020px) and (min-width: 761px) {
  .main-nav { display: flex; }
  .burger { display: none; }
  .mega:not([hidden]) { display: block; }
}

/* ---- Plugins mega menu ---- */
/* Rows instead of the shared tiles (a large icon over an upper-case label): plugin
   names such as "Hera Pre-Written Emails for WooCommerce" ran to four lines there.
   A small icon or logo sits on the name's line, and the name keeps its own case. */
.mega-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 16px; }
.mega-item { flex-direction: row; gap: 12px; width: auto; padding: 8px 10px; border-radius: var(--radius-md); transition: background 120ms; }
.mega-item:hover, .mega-item.is-active { background: var(--color-accent-soft); }
.mega-item .icirc { width: 36px; height: 36px; font-size: 17px; }
.mega-item .hp-menu-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; letter-spacing: normal; text-transform: none; text-align: left; }
.hp-menu-logo { flex: none; height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.hp-menu-logo--dark { display: none; }
html[data-theme="dark"] .hp-menu-logo--light { display: none; }
html[data-theme="dark"] .hp-menu-logo--dark { display: block; }
/* The mobile panel lists the same rows, flush with its other links. */
.mobile-feature-grid { grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 560px) { .mobile-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; } }
.mobile-feature-grid .mega-item { padding-inline: 0; }
.mobile-feature-grid .mega-item:hover { background: none; }
.mega-detail { gap: 0; }
.hp-mega-detail h4 { font-size: 19px; }
.hp-mega-detail p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-400); }
.hp-mega-detail .link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.hp-mega-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-divider); font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.hp-mega-all:hover { color: var(--color-accent); }
.hp-mobile-eyebrow { text-align: left; margin: 14px 0 12px; }
.hp-mobile-all { margin-top: 14px; }

/* ---- hero and inner-page heads ---- */
.hp-hero { text-align: center; }
.hp-hero .eyebrow { margin-bottom: 0; }
.hp-hero h1 { max-width: none; margin: 14px auto 18px; text-wrap: balance; }
.hp-hero .lede { max-width: 66ch; margin-inline: auto; text-wrap: balance; }
.hp-hero .hero-cta { justify-content: center; }

.hp-page-head { padding: clamp(40px, 7vh, 72px) 0 clamp(30px, 5vh, 48px); background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.hp-page-head .eyebrow { text-align: left; }
.hp-page-head .breadcrumb { margin-bottom: 18px; }
.hp-page-head .breadcrumb i { font-size: 11px; }
.hp-page-head .lede { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--color-neutral-400); max-width: 62ch; }
.hp-page-head .hero-cta { margin-top: 24px; }
.hp-section-after-head { border-top: 0; }
/* Narrow the content, not the .container: the container must stay centred so
   the body lines up with the page head above it. */
.hp-narrow > * { max-width: 780px; }

/* Page bodies align with the left-aligned page head rather than centring. */
.hp-prose { max-width: 72ch; margin: 0; padding-top: 0; }
.hp-prose a { text-decoration: underline; text-underline-offset: 3px; }
.hp-prose code { font: 0.88em ui-monospace, Menlo, monospace; padding: 1px 6px; border-radius: 4px; background: var(--color-accent-soft); }
.hp-prose h2:first-child { margin-top: 0; }

.card.hp-static:hover { transform: none; box-shadow: var(--shadow-sm); }

/* ---- flagship ---- */
.hp-flagship { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.hp-flagship__title { display: flex; align-items: center; gap: 16px; }
.hp-flagship__title h2 { font-size: clamp(26px, 2.8vw, 34px); }
.hp-flagship__title .hp-status { margin-top: 8px; }
.hp-flagship__tagline { margin: 22px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -0.01em; color: var(--color-accent); }
.hp-flagship__summary { margin: 10px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--color-neutral-400); max-width: 56ch; }
.hp-flagship__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; }
@media (max-width: 860px) {
  .hp-flagship { grid-template-columns: 1fr; }
}

.hp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hp-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.hp-checklist li i { flex: none; margin-top: 2px; font-size: 18px; color: var(--color-accent); }

/* ---- product cards ---- */
.hp-more-heading { margin: clamp(40px, 6vh, 64px) 0 22px; font-size: 24px; }
.hp-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 960px) { .hp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hp-product-grid { grid-template-columns: 1fr; } }
.hp-product-card { display: flex; flex-direction: column; gap: 10px; }
.hp-product-card__head { display: flex; align-items: center; gap: 14px; }
.hp-product-card h3 { margin: 0; font-size: 18px; }
.hp-product-card h3 a { color: var(--color-text); }
.hp-product-card h3 a:hover { color: var(--color-accent); }
.hp-product-card .hp-status { margin-top: 6px; }
.hp-product-card .hp-product-card__tagline { font-weight: 600; color: var(--color-text); }
.hp-product-card__actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hp-product-card__actions .link { margin-top: 0; }
/* The shared .card .link underline runs under the arrow icon too. */
.hp-product-card__actions .link:hover { text-decoration: none; }

.hp-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-divider); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--color-neutral-400); }
.hp-status i { font-size: 14px; }
.hp-status--live { color: var(--color-accent); background: var(--color-accent-soft); border-color: transparent; }

/* A product's WordPress.org icon (inc/wporg-icons.php), in place of its Phosphor circle:
   the artwork is square, so it keeps its square, softened, at the circle's size. */
.hp-wporg-icon { flex: none; display: block; object-fit: cover; border-radius: 22%; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-divider); }
.hp-wporg-icon--sm { width: 44px; height: 44px; }
.hp-wporg-icon--md { width: 62px; height: 62px; }
.hp-wporg-icon--menu { width: 36px; height: 36px; }

/* ---- product page ---- */
.hp-product-head { display: flex; align-items: center; gap: 18px; }
.hp-product-head .hp-status { margin-top: 8px; }
.hp-product-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.hp-product-aside h2 { font-size: 16px; margin-bottom: 16px; }
.hp-aside-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; font-weight: 600; }
@media (max-width: 900px) { .hp-product-body { grid-template-columns: 1fr; } }

/* Intro video: a poster and a button until clicked (main.js), then YouTube's player. */
.hp-video { margin: 0 0 28px; }
.hp-video__play { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-divider); background: var(--color-surface); text-decoration: none; }
.hp-prose .hp-video__play { text-decoration: none; }
.hp-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0.35; }
.hp-video__label { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--radius-pill); background: var(--color-accent-fill); color: var(--color-on-accent); font-weight: 600; transition: transform 120ms; }
.hp-video__label i { font-size: 24px; }
.hp-video__play:hover .hp-video__label, .hp-video__play:focus-visible .hp-video__label { transform: scale(1.04); }
.hp-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); }
.hp-video__note { margin: 8px 0 0; font-size: 13px; color: var(--color-neutral-400); }

/* Screenshots: a full-width row of up to three (two on tablets, one and a peek on phones)
   that scrolls sideways and snaps; main.js drives the buttons. Every preview has the
   same 16:10 frame, cut from the top; the link opens the full image. The side padding is
   the container's gutter, so the row lines up with the page at narrow widths. */
.hp-screenshots { --shot-gutter: clamp(20px, 5vw, 64px); --shot-gap: 24px; --shot-per-view: 3; }
.hp-screenshots__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-inline: var(--shot-gutter); }
.hp-screenshots h2 { margin: 0; font-size: 24px; }
.hp-slider-nav:not([hidden]) { display: flex; gap: 8px; }
.hp-slider-nav .btn:disabled { opacity: 0.4; cursor: default; }
.hp-shot-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--shot-per-view) - 1) * var(--shot-gap)) / var(--shot-per-view));
  gap: var(--shot-gap); align-items: start;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 2px var(--shot-gutter) 12px; scroll-padding-inline: var(--shot-gutter);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: no-preference) { .hp-shot-track { scroll-behavior: smooth; } }
.hp-shot-track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
@media (max-width: 1024px) { .hp-screenshots { --shot-per-view: 2; } }
@media (max-width: 640px) { .hp-screenshots { --shot-per-view: 1; --shot-gap: 16px; } .hp-shot-track { grid-auto-columns: 85%; } }
.hp-shot { margin: 0; scroll-snap-align: start; }
.hp-shot a { display: block; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-divider); background: var(--color-surface); }
.hp-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.hp-shot a:hover, .hp-shot a:focus-visible { border-color: var(--color-accent); }
.hp-shot figcaption { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--color-neutral-400); }

/* ---- about ---- */
.hp-about { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .hp-about { grid-template-columns: 1fr; } }
.hp-facts-card h2 { font-size: 16px; margin-bottom: 16px; }
.hp-facts { margin: 0; }
.hp-facts dt { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-500); }
.hp-facts dt:first-child { margin-top: 0; }
.hp-facts dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.hp-social-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hp-social { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--color-divider); border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 500; color: var(--color-text); }
.hp-social i { font-size: 16px; color: var(--color-accent); }
.hp-social:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---- privacy policy ---- */
.hp-privacy-owner { margin-bottom: 18px; }
.hp-updated { margin: 0 0 26px; font-size: 13.5px; color: var(--color-neutral-400); }

/* ---- support and security ---- */
.hp-intro { margin-bottom: 26px; }
.hp-billing-note { margin: 26px 0 0; }
.hp-report { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 34px; }
.hp-report h2 { font-size: 20px; margin: 4px 0 8px; }
.hp-report p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-400); }
.hp-report p a { font-weight: 600; }
.hp-report .hp-report__meta { margin-top: 8px; font-size: 13px; }

/* ---- 404 ---- */
.hp-404 .eyebrow { text-align: left; }
.hp-404 h1 { margin: 6px 0 14px; }
.hp-404 .lede { font-size: 17px; line-height: 1.65; color: var(--color-neutral-400); }

/* ---- index fallback ---- */
.hp-index-item + .hp-index-item { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--color-divider); }
.hp-index-item h2 { font-size: 22px; margin-bottom: 8px; }

/* ---- footer ---- */
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; }