/* =========================================================================
   My Gospel Buddy — shared site styles
   Consolidated from what used to be duplicated <style> blocks inside
   docs/header.html, docs/header2.html, docs/header-type-and-shadow.html,
   docs/header-bingo.html, info/index.Rmd, and a-type-and-a-shadow/index.Rmd.
   Edit this ONE file to change the look everywhere. Page-specific content
   (which banner image, which OG tags) lives in each page's own .Rmd.
   ========================================================================= */

:root {
  --primary-color: #02007e;
  --body-color: #f9f9f9;
  --text-color: #636363;
  --text-color-dark: #242738;
  --white-color: #ffffff;
  --light-color: #f8f9fa;
  --font-family: Roboto;
}

body {
  margin: 0;
  padding: 0;
  /* 100vw includes the vertical scrollbar's width, so the full-bleed nav and
     banner overhang by a few px and would otherwise add a horizontal
     scrollbar. */
  overflow-x: hidden;
}

/* Remove the extra margin Bootstrap normally adds under the top nav bar */
.shadow-bottom,
.navbar,
.container {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   FULL-BLEED UTILITY  — important, read before editing

   rmarkdown places `before_body` content *inside* its
   `<div class="container-fluid main-container">`, which has a max-width and
   side padding. That's why the nav bar and banner stopped spanning the full
   window after the reorg.

   The old site got full-width by accident: the old header.html was a whole
   `<!DOCTYPE><html><head>...<body>` document injected into <head>, so the
   browser bailed out of <head>, started <body> early, and dropped the nav +
   banner at the top of the document OUTSIDE main-container. That produced
   the right *look* from invalid markup.

   This class gets the same full-width result from valid markup: it breaks
   an element out of its max-width parent and stretches it to the viewport.
   Uses margin (not position/transform) so it doesn't interfere with
   Bootstrap's .sticky-top on the nav.
   ------------------------------------------------------------------------- */
.gb-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- Page banner (the big circular icon under the nav bar) ------------ */
/* Lives in _includes/banner-*.html and is pulled in via each page's
   `before_body:` so it renders ABOVE the page title, like the old site. */
.gb-page-banner {
  background: linear-gradient(to bottom, #E74C3C 50%, transparent 50%);
  max-height: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Explicit px height + !important on purpose: the previous `height: 75%`
   was being lost to `.content img { height: auto }` in
   articles.style.min.css, which let the icon render at its natural size and
   get cropped by the overflow:hidden above. 150px == the old 75% of 200px. */
.gb-page-banner img {
  border-radius: 50%;
  border: 5px solid #0d0f38;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  height: 150px !important;
  width: 150px !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: cover;
}

.gb-page-banner + div {
  margin-top: -1px;
}

/* ---- Compact badge banner (small alternative to the big circular icon) */
/* Used on pages that want a lighter-weight header. Add this markup at the
   top of the page's own .Rmd:
     <div class="gb-badge-wrap">
       <div class="gb-badge">
         <a href="/"><img src="/assets/img/gospel-buddy-icon.png" alt="Logo"></a>
       </div>
     </div>
*/
.gb-badge-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.gb-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  width: 80px;
}

.gb-badge img {
  height: 60px !important;
  width: 60px !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 4px;
}

/* ---- Shared content helpers (used on info/, a-type-and-a-shadow/, etc.) */
.subtitle-text,
.download-button {
  text-align: center;
}

.download-button {
  display: inline-block;
  width: 180px;
  height: 50px;
  margin-right: 10px;
  background-color: #0073e6;
  color: #ffffff;
  padding: 10px 10px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  line-height: 30px;
}

.download-button img {
  width: 20px;
  margin-right: 10px;
}

.large-image {
  width: 75%;
  display: block;
  margin: 0 auto;
  border: 2px solid #f0f0f0;
}

@media (max-width: 600px) {
  .download-button {
    display: block;
    margin: 0 auto 10px auto;
  }
}