/* ============================================================
   blogPro frontend — "Vitrin" design (modern cards).
   Scoped under .bp-page. Light (default) + dark schemes via
   [data-bp-scheme]. Left category sidebar on every page,
   two-column card grid. Accent comes from inline --bp-accent
   (admin-configurable); soft tints derived via color-mix.
   ============================================================ */

.bp-page{
  /* light scheme (default) */
  --bp-canvas:#f6faf8; --bp-surface:#ffffff; --bp-surface2:#f1f6f3;
  --bp-ink:#152019; --bp-muted:#5d6c64; --bp-line:#e5ece8;
  --bp-accent:#0f766e; --bp-amber:#e8893b; --bp-on-accent:#ffffff;
  --bp-accent-soft:color-mix(in srgb, var(--bp-accent) 12%, transparent);
  --bp-shadow:0 1px 2px rgba(18,40,32,.04),0 14px 30px -14px rgba(18,40,32,.18);
  --bp-shadow-h:0 1px 2px rgba(18,40,32,.05),0 26px 46px -18px rgba(18,40,32,.30);
  --bp-r:20px;

  /* Theme-native: NO own page background and NO own width box. The blog sits
     inside the active theme's content container, inheriting its background and
     width so it never looks like a foreign panel. The colour scheme only sets
     the card/text palette (admin picks the one matching their theme); text
     colour stays inherited from the theme by default. */
  background:transparent;
  font-family:inherit;
  font-size:16px; line-height:1.6;
}
.bp-page[data-bp-scheme="dark"]{
  --bp-canvas:transparent; --bp-surface:#161d1b; --bp-surface2:#1b2421;
  --bp-ink:#e8ede9; --bp-muted:#93a39b; --bp-line:#26302c;
  --bp-on-accent:#06120f;
  --bp-accent-soft:color-mix(in srgb, var(--bp-accent) 22%, transparent);
  --bp-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 32px -16px rgba(0,0,0,.6);
  --bp-shadow-h:0 1px 2px rgba(0,0,0,.4),0 28px 50px -18px rgba(0,0,0,.7);
  color:var(--bp-ink);
}
.bp-page *{box-sizing:border-box}
.bp-page a{color:inherit;text-decoration:none}
/* Width handling. A plugin page renders between the theme header/footer but
   OUTSIDE the theme's own content-width wrapper, so we have to set the width
   ourselves. We FOLLOW the host theme's content-width CSS variable when it
   exposes one (Atlas: --atlas-container, which the admin can change in theme
   settings), falling back to a sane cap for themes that don't — those themes
   already constrain their content area, so the fallback never bites. */
.bp-container{
  max-width:var(--atlas-container, var(--nivo-container, var(--pkp-container, 1280px)));
  margin:0 auto;
  /* No horizontal padding by default: themes already pad their content
     column, so adding our own just wastes space (the article ends up far
     narrower than the theme's native content). Full-width-main themes that
     DON'T pad — Atlas — get edge padding via the atlas-scoped rule below. */
  padding:6px 0 48px;
}

/* ---- Host-theme integration (ATLAS THEME ONLY) ----
   The Atlas theme renders its own page-title band ('.atlas-nameplate-head')
   for plugin pages, which duplicates our hero and leaves a wide empty strip.
   Hide it on the blog pages so our hero is the single heading. These selectors
   are deliberately Atlas-specific ('.atlas-*'): they are no-ops on every other
   theme, so the header/nav of default, manuscript, bootstrap3, etc. is never
   affected. (Earlier this rule also matched the generic '.pkp_structure_head',
   which IS the site header on those themes — that was wrong and is removed.) */
body.pkp_page_blog .atlas-nameplate-head,
body.pkp_page_blog .atlas-main > .atlas-wrap > h1:first-child{display:none}
body.pkp_page_blog .atlas-main{padding-top:0;margin-top:0}
/* Atlas' main area is full-bleed (the width wrapper lives deeper), so unlike
   other themes it provides no side padding — give the blog its own here. */
body.pkp_page_blog .atlas-main .bp-container{padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}
.bp-disp{font-family:inherit}

/* ---- Hero / list heading ---- */
.bp-hero{padding:20px 0 10px}
.bp-hero h1{font-family:inherit;font-weight:700;font-size:clamp(30px,5vw,50px);line-height:1.03;letter-spacing:-.02em;margin:0 0 8px}
.bp-hero-sub{color:var(--bp-muted);font-size:18px;max-width:56ch;margin:0}
.bp-listhead{padding:20px 0 10px}
.bp-listhead h1{font-family:inherit;font-weight:700;font-size:clamp(30px,5vw,50px);line-height:1.03;letter-spacing:-.02em;margin:8px 0 0}
.bp-listhead .bp-head-label{color:var(--bp-muted);font-weight:600}
.bp-back{display:inline-block;color:var(--bp-accent);font-weight:600;font-size:14px;margin-bottom:6px}

/* ---- Two-column layout (sidebar + main) on every page ---- */
.bp-cols{display:grid;grid-template-columns:218px 1fr;gap:34px;padding:18px 0 0;align-items:start}
.bp-cols.bp-menu-none,.bp-cols.bp-menu-top{grid-template-columns:1fr}
.bp-side{position:sticky;top:18px}
.bp-cols.bp-menu-top .bp-side{position:static}
.bp-catmenu{display:flex;flex-direction:column;gap:3px;background:var(--bp-surface);border:1px solid var(--bp-line);border-radius:var(--bp-r);padding:14px;box-shadow:var(--bp-shadow)}
.bp-catmenu-h{font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bp-muted);padding:4px 10px 8px}
.bp-catmenu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:12px;font-weight:600;font-size:14.5px;color:var(--bp-ink);transition:.14s}
.bp-catmenu a:hover{background:var(--bp-surface2)}
.bp-catmenu a.on{background:var(--bp-accent);color:var(--bp-on-accent)}
.bp-ct{font-style:normal;background:var(--bp-accent-soft);color:var(--bp-accent);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700}
.bp-catmenu a.on .bp-ct{background:rgba(255,255,255,.22);color:var(--bp-on-accent)}
.bp-side-rss{margin-top:6px;color:var(--bp-accent)!important;font-size:13px;font-weight:700}
.bp-rss-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bp-amber);margin-right:6px;vertical-align:middle}
.bp-cols.bp-menu-top .bp-catmenu{flex-direction:row;flex-wrap:wrap;align-items:center}
.bp-cols.bp-menu-top .bp-catmenu-h{width:100%;padding:0 0 6px}
/* Top-menu (and hidden-menu) modes have no left column, so the post detail
   uses the full content width instead of the centred reading column. */
.bp-cols.bp-menu-top .bp-single,
.bp-cols.bp-menu-none .bp-single{max-width:none}

/* ---- Card grid (two columns by default) ---- */
.bp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bp-empty-front{padding:64px 0;text-align:center;color:var(--bp-muted)}

/* List layout — single column of horizontal cards (cover beside text) */
.bp-grid.bp-lay-list{grid-template-columns:1fr}
.bp-grid.bp-lay-list .bp-card{flex-direction:row}
.bp-grid.bp-lay-list .bp-card-cover{flex:0 0 36%;aspect-ratio:auto;min-height:190px}
.bp-grid.bp-lay-list .bp-card-b{flex:1}

/* card */
.bp-card{background:var(--bp-surface);border:1px solid var(--bp-line);border-radius:var(--bp-r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--bp-shadow);transition:transform .18s,box-shadow .18s}
.bp-card:hover{transform:translateY(-4px);box-shadow:var(--bp-shadow-h)}
.bp-card-cover{aspect-ratio:16/9;position:relative;background-size:cover;background-position:center;background-color:var(--bp-surface2)}
.bp-card-cover.ph{background-image:linear-gradient(135deg,color-mix(in srgb,var(--bp-accent) 75%,#fff),var(--bp-accent))}
.bp-card-cover.bp-cover-contain{background-size:contain;background-repeat:no-repeat}
.bp-star{position:absolute;top:12px;left:12px;background:var(--bp-surface);color:var(--bp-amber);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;box-shadow:0 4px 12px -3px rgba(0,0,0,.25);z-index:2}
.bp-play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--bp-accent);display:grid;place-items:center;font-size:18px;padding-left:3px;box-shadow:0 8px 20px -6px rgba(0,0,0,.3)}
.bp-card-b{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.bp-chip{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--bp-accent);background:var(--bp-accent-soft);padding:5px 11px;border-radius:999px}
.bp-card-title{font-family:inherit;font-weight:600;font-size:20px;line-height:1.16;letter-spacing:-.008em;margin:11px 0 7px}
.bp-card:hover .bp-card-title{color:var(--bp-accent)}
.bp-card-ex{color:var(--bp-muted);font-size:14.5px;line-height:1.5;margin:0 0 14px;flex:1}
.bp-card-m{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--bp-muted)}
.bp-d{width:3px;height:3px;border-radius:50%;background:var(--bp-line)}

/* featured banner — spans both columns, horizontal */
.bp-feat-banner{grid-column:1 / -1;display:grid;grid-template-columns:1.05fr 1fr;background:var(--bp-surface);border:1px solid var(--bp-line);border-radius:var(--bp-r);overflow:hidden;box-shadow:var(--bp-shadow);transition:transform .18s,box-shadow .18s;min-height:300px}
.bp-feat-banner:hover{transform:translateY(-3px);box-shadow:var(--bp-shadow-h)}
.bp-fb-cover{position:relative;background-size:cover;background-position:center;min-height:230px;background-color:var(--bp-surface2)}
.bp-fb-cover.ph{background-image:linear-gradient(135deg,color-mix(in srgb,var(--bp-accent) 70%,#fff),var(--bp-accent))}
.bp-fb-b{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;position:relative}
.bp-fb-b .bp-star{position:static;align-self:flex-start;margin-bottom:12px;background:color-mix(in srgb,var(--bp-amber) 16%,transparent);box-shadow:none}
.bp-fb-title{font-family:inherit;font-weight:700;font-size:clamp(24px,3vw,33px);line-height:1.08;letter-spacing:-.015em;margin:10px 0 9px}
.bp-feat-banner:hover .bp-fb-title{color:var(--bp-accent)}
.bp-fb-ex{color:var(--bp-muted);font-size:15.5px;line-height:1.55;margin:0 0 14px}

/* ---- Pager ---- */
.bp-pager{display:flex;gap:8px;justify-content:center;margin:34px 0 0}
.bp-pg{min-width:42px;height:42px;display:grid;place-items:center;background:var(--bp-surface);border:1px solid var(--bp-line);border-radius:12px;font-weight:600;color:var(--bp-ink);box-shadow:var(--bp-shadow)}
.bp-pg:hover{border-color:var(--bp-accent)}
.bp-pg.on{background:var(--bp-accent);color:var(--bp-on-accent);border-color:var(--bp-accent)}

/* ---- Single post ---- */
.bp-single{background:var(--bp-surface);border:1px solid var(--bp-line);border-radius:calc(var(--bp-r) + 4px);box-shadow:var(--bp-shadow);padding:30px 34px 36px}
.bp-single-cats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.bp-single-title{font-family:inherit;font-weight:700;font-size:clamp(30px,4.6vw,48px);line-height:1.06;letter-spacing:-.02em;margin:16px 0 12px}
.bp-lede{font-size:20px;color:var(--bp-muted);line-height:1.5;margin:0 0 18px}
.bp-single-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--bp-muted);font-size:13.5px;padding:14px 0;border-top:1px solid var(--bp-line);border-bottom:1px solid var(--bp-line);margin-bottom:24px}
.bp-preview-banner{background:color-mix(in srgb,var(--bp-amber) 16%,transparent);color:var(--bp-amber);padding:9px 14px;border-radius:12px;margin-bottom:14px;font-weight:700;font-size:14px}
.bp-cover{margin:0 0 26px;border-radius:var(--bp-r);overflow:hidden;aspect-ratio:16/8;background:var(--bp-surface2)}
.bp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.bp-cover.contain img{object-fit:contain;background:#0b1110}

.bp-single-body{font-size:17.5px;line-height:1.75;color:var(--bp-ink)}
.bp-single-body p{margin:0 0 20px}
.bp-single-body h2{font-family:inherit;font-weight:700;font-size:27px;letter-spacing:-.01em;margin:32px 0 12px}
.bp-single-body h3{font-family:inherit;font-weight:600;font-size:21px;margin:26px 0 10px}
.bp-single-body a{color:var(--bp-accent);text-decoration:underline;text-underline-offset:3px}
.bp-single-body blockquote{margin:26px 0;padding:18px 22px;background:var(--bp-surface2);border-left:4px solid var(--bp-accent);border-radius:0 16px 16px 0;font-size:19px;font-weight:500}
.bp-single-body ul,.bp-single-body ol{margin:0 0 20px;padding:0;list-style:none}
.bp-single-body ul li{position:relative;padding:6px 0 6px 28px}
.bp-single-body ul li::before{content:"";position:absolute;left:4px;top:14px;width:9px;height:9px;border-radius:3px;background:var(--bp-accent)}
.bp-single-body ol{counter-reset:bpli}
.bp-single-body ol li{position:relative;padding:6px 0 6px 34px;counter-increment:bpli}
.bp-single-body ol li::before{content:counter(bpli);position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:7px;background:var(--bp-accent-soft);color:var(--bp-accent);font-weight:700;font-size:12px;display:grid;place-items:center}
.bp-single-body img{max-width:100%;height:auto;border-radius:12px}
.bp-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--bp-r);margin:26px 0}
.bp-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.bp-single-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--bp-line)}
.bp-tag{background:var(--bp-surface2);border:1px solid var(--bp-line);padding:6px 13px;border-radius:999px;font-weight:600;font-size:13px;color:var(--bp-muted)}
.bp-tag:hover{color:var(--bp-accent);border-color:var(--bp-accent)}

/* ---- Related ---- */
.bp-related{margin:40px 0 0}
.bp-related-h{font-family:inherit;font-weight:700;font-size:23px;margin:0 0 18px}

/* ---- Footer credit ---- */
.bp-foot{margin-top:40px;padding-top:22px;border-top:1px solid var(--bp-line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--bp-muted)}
.bp-foot a{color:var(--bp-accent);font-weight:600}

@media(max-width:980px){
  .bp-cols{grid-template-columns:1fr;gap:20px}
  .bp-side{position:static}
  .bp-catmenu{flex-direction:row;flex-wrap:wrap;align-items:center}
  .bp-catmenu-h{width:100%}
  .bp-single{padding:24px 22px 28px}
}
@media(max-width:620px){
  .bp-grid{grid-template-columns:1fr}
  .bp-feat-banner{grid-template-columns:1fr}
  .bp-grid.bp-lay-list .bp-card{flex-direction:column}
  .bp-grid.bp-lay-list .bp-card-cover{aspect-ratio:16/9;min-height:0}
}