/*
Theme Name:   BPO and Beyond
Theme URI:    https://bpoandbeyond.com
Description:  Genesis child theme for BPO and Beyond. Styles the pages the core plugin does not handle (single posts, blog index, archives, search, 404) to match the plugin design system. All plugin pages keep rendering through bab-core-plugin untouched. Built for voice, non-voice, back-office, and shared services professionals.
Author:       BPO and Beyond
Author URI:   https://bpoandbeyond.com
Template:     genesis
Version:      1.0.0
License:      GPL-2.0+
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bpo-and-beyond
*/

/* ============================================================
   BPO and Beyond · child theme stylesheet
   Scope: ONLY the front-end pages the core plugin does not own
   (single posts, blog/archive index, search, 404).

   The core plugin (bab-core-plugin) already enqueues babc-core.css
   globally, which defines --blue, --amber, --navy, --off, --white,
   --muted, etc, and styles .babc-nav and .babc-footer. This file
   reuses those exact tokens so blog content matches plugin pages.
   Everything here is namespaced under .bab-content to avoid ever
   touching a plugin-rendered page.
   ============================================================ */

/* Local fallbacks in case babc-core.css load order changes.
   These mirror the plugin token values exactly. */
:root {
  --bab-blue:  #377DFF;
  --bab-amber: #F5A623;
  --bab-navy:  #0A1628;
  --bab-off:   #F4F6FB;
  --bab-white: #FFFFFF;
  --bab-muted: #6B7A99;
  --bab-line:  rgba(55,125,255,0.12);
  --bab-blue-l: rgba(55,125,255,0.08);
  --bab-radius: 16px;
  --bab-radius-sm: 10px;
  --bab-shadow: 0 4px 24px rgba(10,22,40,0.07);
  --bab-shadow-lg: 0 12px 40px rgba(10,22,40,0.12);
}

/* Page canvas for non-plugin pages */
body.bab-shell {
  background: var(--bab-off);
  color: var(--bab-navy);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
}
body.bab-shell .site-inner { max-width: none; padding: 0; }

/* Shared content container */
.bab-content { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.bab-content h1, .bab-content h2, .bab-content h3, .bab-content h4 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--bab-navy);
  letter-spacing: -0.01em; line-height: 1.2;
}

/* ===== ARCHIVE / BLOG HEADER ===== */
.bab-archive-head { background: var(--bab-navy); color: var(--bab-white); padding: 56px 0 48px; position: relative; overflow: hidden; }
.bab-archive-head::before { content: ""; position: absolute; top: -140px; right: -100px; width: 480px; height: 480px; background: radial-gradient(circle, var(--bab-blue-l), transparent 65%); }
.bab-archive-head .bab-content { position: relative; }
.bab-archive-eyebrow { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bab-amber); }
.bab-archive-head h1 { color: var(--bab-white); font-size: clamp(2rem, 4vw, 2.8rem); margin: 12px 0 10px; }
.bab-archive-head p { color: rgba(255,255,255,0.78); font-size: 1.05rem; max-width: 56ch; margin: 0; }

/* ===== POST GRID (blog index + archives) ===== */
.bab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 44px 0 8px; }
.bab-card { background: var(--bab-white); border-radius: var(--bab-radius); overflow: hidden; box-shadow: var(--bab-shadow); display: flex; flex-direction: column; transition: transform 0.15s, box-shadow 0.15s; }
.bab-card:hover { transform: translateY(-3px); box-shadow: var(--bab-shadow-lg); }
.bab-card a { text-decoration: none; color: inherit; }
.bab-card-media { height: 170px; position: relative; overflow: hidden; }
.bab-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bab-card-media.is-gradient { background: linear-gradient(135deg, var(--bab-navy), #16284a); }
.bab-card-media .bab-cat-flag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,0.92); color: var(--bab-navy); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.bab-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.bab-card-date { font-size: 0.76rem; color: rgba(10,22,40,0.45); letter-spacing: 0.03em; }
.bab-card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.12rem; line-height: 1.3; margin: 7px 0 10px; color: var(--bab-blue); }
.bab-card-excerpt { font-size: 0.9rem; color: rgba(10,22,40,0.62); margin-bottom: 16px; }
.bab-card-more { margin-top: auto; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--bab-blue); }

/* ===== SINGLE POST ===== */
.bab-single { padding-bottom: 64px; }
.bab-post-hero { background: var(--bab-navy); color: var(--bab-white); padding: 56px 0 44px; position: relative; overflow: hidden; }
.bab-post-hero::before { content: ""; position: absolute; top: -140px; right: -90px; width: 460px; height: 460px; background: radial-gradient(circle, var(--bab-blue-l), transparent 65%); }
.bab-post-hero .bab-content { position: relative; max-width: 800px; }
.bab-post-eyebrow { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bab-amber); }
.bab-post-hero h1 { color: var(--bab-white); font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 12px 0 16px; }
.bab-post-meta { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.7); font-size: 0.86rem; }
.bab-post-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bab-blue); display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--bab-white); font-size: 0.9rem; }

.bab-post-feature { max-width: 800px; margin: -28px auto 0; padding: 0 28px; position: relative; z-index: 2; }
.bab-post-feature img { width: 100%; border-radius: var(--bab-radius); box-shadow: var(--bab-shadow-lg); display: block; }

.bab-post-body { max-width: 760px; margin: 40px auto 0; padding: 0 28px; }
.bab-post-body p { font-size: 1.04rem; line-height: 1.75; color: rgba(10,22,40,0.82); margin: 0 0 20px; }
.bab-post-body h2 { font-size: 1.5rem; margin: 36px 0 14px; }
.bab-post-body h3 { font-size: 1.22rem; margin: 28px 0 10px; }
.bab-post-body a { color: var(--bab-blue); text-decoration: underline; }
.bab-post-body img { max-width: 100%; height: auto; border-radius: var(--bab-radius-sm); margin: 20px 0; }
.bab-post-body ul, .bab-post-body ol { margin: 0 0 20px 0; padding-left: 0; list-style: none; }
.bab-post-body ul li { position: relative; padding-left: 26px; margin-bottom: 11px; color: rgba(10,22,40,0.82); }
.bab-post-body ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--bab-blue); }
.bab-post-body ol { counter-reset: bab; }
.bab-post-body ol li { position: relative; padding-left: 32px; margin-bottom: 11px; counter-increment: bab; color: rgba(10,22,40,0.82); }
.bab-post-body ol li::before { content: counter(bab); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--bab-blue-l); color: var(--bab-blue); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.78rem; display: grid; place-items: center; }
.bab-post-body blockquote { border-left: 4px solid var(--bab-amber); background: rgba(245,166,35,0.10); margin: 26px 0; padding: 18px 22px; border-radius: 0 var(--bab-radius-sm) var(--bab-radius-sm) 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; color: var(--bab-navy); }
.bab-post-body blockquote p { font-size: 1.08rem; margin: 0; }

/* Post CTA block at the end */
.bab-post-cta { max-width: 760px; margin: 40px auto 0; padding: 0 28px; }
.bab-post-cta-inner { background: var(--bab-navy); border-radius: var(--bab-radius); padding: 30px; text-align: center; }
.bab-post-cta-inner h3 { color: var(--bab-white); margin: 0 0 6px; }
.bab-post-cta-inner p { color: rgba(255,255,255,0.72); font-size: 0.94rem; margin: 0 0 18px; }

/* ===== BUTTONS (match plugin) ===== */
.bab-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.95rem; padding: 13px 26px; border-radius: var(--bab-radius-sm); text-decoration: none; border: none; cursor: pointer; transition: background 0.15s, box-shadow 0.15s, transform 0.12s; }
.bab-btn:active { transform: translateY(1px); }
.bab-btn-amber { background: var(--bab-amber); color: var(--bab-navy); }
.bab-btn-amber:hover { background: #e89914; }
.bab-btn-outline { background: transparent; color: var(--bab-blue); border: 1.5px solid var(--bab-blue); }
.bab-btn-outline:hover { background: var(--bab-blue-l); }

/* ===== PAGINATION ===== */
.bab-pagination { display: flex; justify-content: center; gap: 8px; padding: 40px 0 8px; }
.bab-pagination a, .bab-pagination .bab-page-current { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.9rem; padding: 9px 15px; border-radius: var(--bab-radius-sm); text-decoration: none; border: 1.5px solid var(--bab-line); color: var(--bab-navy); background: var(--bab-white); }
.bab-pagination a:hover { border-color: var(--bab-blue); color: var(--bab-blue); }
.bab-pagination .bab-page-current { background: var(--bab-navy); color: var(--bab-white); border-color: var(--bab-navy); }

/* ===== SEARCH ===== */
.bab-search-bar { padding: 36px 0 8px; }
.bab-search-form { position: relative; max-width: 480px; }
.bab-search-form input { width: 100%; padding: 13px 16px 13px 44px; border: 1.5px solid var(--bab-line); border-radius: var(--bab-radius-sm); font-family: 'Inter', sans-serif; font-size: 0.96rem; background: var(--bab-white); color: var(--bab-navy); }
.bab-search-form input:focus { outline: none; border-color: var(--bab-blue); box-shadow: 0 0 0 3px var(--bab-blue-l); }
.bab-search-form svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: rgba(10,22,40,0.4); }

/* ===== 404 + EMPTY STATES ===== */
.bab-state { text-align: center; padding: 80px 28px; max-width: 560px; margin: 0 auto; }
.bab-state .bab-state-code { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 4rem; color: var(--bab-blue); line-height: 1; }
.bab-state h1 { font-size: 1.6rem; margin: 14px 0 8px; }
.bab-state p { color: rgba(10,22,40,0.6); margin: 0 0 24px; }

@media (max-width: 600px) {
  .bab-content { padding: 0 20px; }
  .bab-post-feature, .bab-post-body, .bab-post-cta { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }