/* ==========================================================================
   jsonBible.org
   Sits on top of the CakeFactory theme (bootstrap + font-awesome + style.css)
   but takes over the header, body and footer chrome entirely — the layout is
   modelled on HelpWithFriends.com: white cards on light grey, a tile hanging
   off the top-left corner, right-aligned labels, one red button per card.
   ========================================================================== */

:root{
  --jb-accent:#f75353;      /* CakeFactory @red      */
  --jb-accent-d:#ed4747;    /* CakeFactory @dark-red */
  --jb-lblue:#32c8de;
  --jb-text:#666;
  --jb-mute:#a5a5a5;
  --jb-line:#e8e8e8;
  --jb-code-bg:#2b2b2b;
  --jb-code-ink:#e6e6e6;
  --jb-woc:#c0392b;
  --jb-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}

body{ background:#f4f4f4; }
.wrapper{ overflow:visible; }

/* ==========================================================================
   HEADER — white bar, mark + wordmark + tagline. No nav.
   ========================================================================== */
.jb-header{
  background:#fff; border-bottom:1px solid #e6e6e6; padding:22px 0;
  box-shadow:none;
}
.jb-brand{ display:inline-block; text-decoration:none; }
.jb-brand:hover, .jb-brand:focus{ text-decoration:none; }
.jb-brand .jb-mark{
  display:inline-block; vertical-align:middle;
  width:52px; height:52px; line-height:52px; text-align:center;
  border-radius:10px; margin-right:16px;
  background:linear-gradient(180deg,#4e535e 0%,#343841 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff; font-family:var(--jb-mono); font-size:22px; font-weight:700;
}
.jb-brand .jb-brand-txt{ display:inline-block; vertical-align:middle; }
.jb-brand h1{
  margin:0; font-size:34px; font-weight:700; color:#555; line-height:1.1;
}
.jb-brand p{
  margin:3px 0 0; font-size:13px; color:var(--jb-mute);
}

/* ==========================================================================
   BODY
   ========================================================================== */
.jb-body{ padding:60px 0 70px; }

/* ---- card ------------------------------------------------------------- */
.jb-card{
  position:relative;
  background:#fff;
  border:1px solid var(--jb-line);
  border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  padding:30px 32px 32px;
  margin:0 0 64px 46px;      /* left margin makes room for the hanging tile */
}
.jb-card:last-child{ margin-bottom:0; }

.jb-tile{
  position:absolute; left:-46px; top:-24px;
  width:92px; height:92px; line-height:92px; text-align:center;
  border-radius:12px;
  background:linear-gradient(180deg,#4e535e 0%,#343841 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff; font-family:var(--jb-mono); font-size:40px; font-weight:700;
}
.jb-tile .fa{ font-size:32px; }

.jb-card-head{ padding-left:56px; margin-bottom:22px; }  /* clear the tile */
.jb-card-head h2{ margin:0; font-size:27px; font-weight:400; color:#777; }
.jb-card-head p{ margin:8px 0 0; font-size:13px; color:var(--jb-mute); line-height:1.65; }
.jb-card-head p + p{ margin-top:10px; }
.jb-card-head code{ font-size:11px; }
.jb-card-head a{ color:#8a8a8a; text-decoration:underline; }
.jb-card-head a:hover{ color:var(--jb-accent); }

/* ---- form (right-aligned labels, HWF style) --------------------------- */
.jb-form .control-label{
  font-weight:400; font-size:13px; color:var(--jb-mute);
  padding-top:9px; line-height:1.25;
}
.jb-form .form-control{
  height:38px; font-size:14px; box-shadow:none; border-color:#e0e0e0;
}
.jb-form .form-control::placeholder{ color:#c9c9c9; }
.jb-form .form-control:focus{ border-color:#ccc; box-shadow:none; }
.jb-form .form-group{ margin-bottom:12px; }
.jb-form .jb-actions{ margin-bottom:0; }
.jb-form .btn{ min-width:110px; }

.jb-eg{ margin:14px 0 0; padding-left:15px; }
.jb-eg a{
  display:inline-block; font-family:var(--jb-mono); font-size:11px;
  background:#f6f6f6; border:1px solid #e8e8e8; border-radius:3px;
  padding:2px 7px; margin:0 4px 4px 0; color:#999;
}
.jb-eg a:hover{
  background:var(--jb-accent); border-color:var(--jb-accent); color:#fff; text-decoration:none;
}

/* ---- output pane ------------------------------------------------------ */
.jb-out{
  border:1px solid #eee; border-radius:3px; background:#fcfcfc;
  overflow:hidden; height:100%;
}
.jb-empty{
  padding:70px 20px; text-align:center; color:#c8c8c8; font-size:13px;
}

.jb-block{ border-bottom:1px solid #eee; }
.jb-block:last-child{ border-bottom:0; }
.jb-block > h3{
  margin:0; padding:8px 14px; background:#f5f5f5; border-bottom:1px solid #eee;
  font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:#b0b0b0;
}
.jb-block > .jb-body-in{ padding:14px; background:#fff; }
.jb-block pre{
  margin:0; border:0; border-radius:0; background:var(--jb-code-bg);
  color:var(--jb-code-ink); font-family:var(--jb-mono); font-size:12px;
  line-height:1.6; padding:13px 15px; max-height:300px; overflow:auto;
  white-space:pre; word-wrap:normal;
}
.jb-block pre .k{ color:#8fc7ea; }
.jb-block pre .s{ color:#b5d58a; }
.jb-block pre .f{ color:#e5c07b; }
.jb-block pre .c{ color:#8a8a8a; font-style:italic; }

.jb-url{ font-family:var(--jb-mono); font-size:12px; word-break:break-all; margin-bottom:4px; }
.jb-url:last-child{ margin-bottom:0; }
.jb-url a{ color:#3f7ba5; border-bottom:1px dotted #a9c6d8; }
.jb-url a:hover{ color:var(--jb-accent); }
.jb-note{ font-size:12px; color:#b0b0b0; margin:9px 0 0; }
.jb-err{ color:var(--jb-accent-d); font-weight:600; }

/* ==========================================================================
   verse rendering
   ========================================================================== */
.jb-verse{
  margin:0 0 9px; font-size:16px; line-height:1.6; color:#555;
  font-family:Georgia,"Times New Roman",serif;
}
.jb-verse:last-child{ margin-bottom:0; }
.jb-verse .jb-n{
  font-size:11px; font-weight:700; color:var(--jb-accent);
  vertical-align:.4em; margin-right:4px;
}
.jb-verse .jb-ref{
  display:inline-block; font-family:Arial,sans-serif; font-size:10px; font-weight:700;
  color:#fff; background:#c4c4c4; border-radius:2px; padding:2px 5px; margin-right:6px;
  vertical-align:2px;
}
.jb-verse .jb-supline{
  display:block; font-style:italic; color:#aaa; font-size:14px; margin-bottom:2px;
}
.jb-verse mark{ background:#fdf0b3; padding:0 2px; }

/* editorial markers carried in the data */
.jb-add{ font-style:italic; }                       /* [supplied words]  */
.jb-woc{ color:var(--jb-woc); }                     /* ‹words of Christ› */
.jb-pil{ color:var(--jb-accent); font-weight:700; } /* ¶ paragraph       */

.jb-sw{ cursor:pointer; border-bottom:1px dotted #d5d5d5; }
.jb-sw:hover{ color:var(--jb-accent); border-bottom-color:var(--jb-accent); }
.jb-sw sup{
  font-family:var(--jb-mono); font-size:9px; font-weight:600;
  color:var(--jb-lblue); margin-left:1px; top:-.6em;
}

/* ---- lexicon card ----------------------------------------------------- */
.jb-lex dt{
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#c0c0c0; margin-top:10px;
}
.jb-lex dt:first-child{ margin-top:0; }
.jb-lex dd{ margin:2px 0 0; }
.jb-lex .jb-lemma{ font-size:24px; line-height:1.3; color:#555; }
.jb-lex ol, .jb-lex ul{ margin:5px 0 0; padding-left:22px; }

/* ==========================================================================
   FOOTER — light, like HelpWithFriends
   ========================================================================== */
.jb-footer{
  background:#fafafa; border-top:1px solid #e6e6e6;
  padding:44px 0 26px; font-size:13px; color:var(--jb-mute);
}
.jb-footer .jb-brand{ margin-bottom:14px; }
.jb-footer .jb-brand .jb-mark{
  width:38px; height:38px; line-height:38px; font-size:16px; border-radius:8px; margin-right:11px;
}
.jb-footer .jb-brand h1{ font-size:25px; }
.jb-footer p{ line-height:1.75; margin:0 0 10px; }
.jb-footer a{ color:#8a8a8a; }
.jb-footer a:hover{ color:var(--jb-accent); }
.jb-footer h4{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#b8b8b8; margin:6px 0 10px;
}
.jb-footer .jb-sites div{ line-height:2; }

/* ministry footer — injected from cdn.phpbible.org (Bootstrap 3 col-sm-4 fragment) */
.jb-ministry{ margin-top:26px; padding-top:24px; border-top:1px solid #ececec; }
.jb-ministry h3{
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#9a9a9a; margin:0 0 4px; padding:0 15px;
}
.jb-ministry h3 small{ font-size:inherit; color:inherit; }
.jb-ministry h3 a{ text-transform:none; letter-spacing:0; font-weight:400; }
.jb-ministry h4{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#b8b8b8; margin:0 0 6px;
}
.jb-ministry div{ line-height:1.9; font-size:13px; }
.jb-ministry a{ color:#8a8a8a; }
.jb-ministry a:hover{ color:var(--jb-accent); }

.jb-copyright{
  margin-top:34px; padding-top:18px; border-top:1px solid #ececec;
  text-align:center; font-size:12px; color:#bbb;
}
.jb-copyright a{ color:#999; }

/* "Powered by BibleEngine.org" badge — light skin, sits in the light footer */
.pbbe{
  --pbbe-ink:#3a3a3a; --pbbe-brass:#a9853f; --pbbe-muted:#a09a8e;
  --pbbe-bg:#fff;     --pbbe-line:#e4ded1;
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px; border:1px solid var(--pbbe-line); border-radius:999px;
  background:var(--pbbe-bg); text-decoration:none; line-height:1;
  font-family:"Montserrat",Arial,Helvetica,sans-serif; transition:border-color .2s ease;
}
.pbbe:hover{ border-color:var(--pbbe-brass); text-decoration:none; }
.pbbe svg{ width:20px; height:20px; flex:none; fill:var(--pbbe-brass); }
.pbbe .pbbe-txt{ display:flex; flex-direction:column; gap:3px; }
.pbbe .pbbe-kick{ font-size:8px; font-weight:600; letter-spacing:.16em; color:var(--pbbe-muted); }
.pbbe .pbbe-name{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--pbbe-ink); }
.pbbe .pbbe-name .e{ color:var(--pbbe-brass); font-weight:600; letter-spacing:-.03em; }
.pbbe .pbbe-name .tld{ color:var(--pbbe-muted); font-weight:500; }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:991px){
  .jb-out{ margin-top:20px; height:auto; }
  .jb-empty{ padding:40px 20px; }
}
@media (max-width:767px){
  .jb-body{ padding:34px 0 40px; }
  .jb-card{
    margin:0 0 52px 0; padding:26px 18px 22px;
  }
  .jb-tile{
    position:static; display:block; margin:-52px 0 16px;
    width:66px; height:66px; line-height:66px; font-size:30px;
  }
  .jb-card-head{ padding-left:0; }
  .jb-form .control-label{ text-align:left; padding-top:0; margin-bottom:4px; }
  .jb-form .btn{ width:100%; }
  .jb-eg{ padding-left:0; }
  .jb-block pre{ font-size:11px; }
  .jb-footer .col-md-2{ margin-top:22px; }
}