/**
 * @file
 * The Hope Project sub-theme overrides.
 *
 * Breakpoints match DXPR's header_mobile_breakpoint (1200px): at 1200px and
 * below the site uses the hamburger menu and the mobile/tablet rules here;
 * desktop starts at 1201px. Mobile font sizes for 769-1200px are added in
 * thehopeproject_preprocess_html().
 *
 * This file loads before the Asset Injector CSS, so rules that override an
 * Asset Injector rule with the same selector are prefixed with "body".
 */

/* ==========================================================================
   Phones and tablets (up to 1200px)
   ========================================================================== */

@media (max-width: 1200px) {

  /* HEADER: logo and hamburger on one row. */
  .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .navbar-header .region-navigation { flex: 1 1 auto; min-width: 0; }
  #block-thehopeproject-logoen { padding: 10px 0; margin: 0; }
  #dxpr-theme-menu-toggle { float: none; margin: 0; flex: 0 0 auto; }
  /* Keep the open menu drawer above page content (DXPR puts the toggle at 410). */
  #dxpr-theme-main-menu { z-index: 400; }

  /* FRONT PAGE TILES: fill their column instead of a fixed 400px
     (overrides Asset Injector "front_page"). */
  body .field--name-field-full-movie,
  body .full-movie-left .field--name-field-full-movie,
  body .field--name-field-chapters {
    display: block;
    float: none;
    width: 100%;
    margin-right: 0;
    background-size: cover;
    background-position: center;
  }

  /* CHAPTER PAGES: video first, then the previous/next arrows side by side
     underneath, always visible (as on D7), no hover button swap
     (overrides Asset Injector "slide_show"). */
  .page-node-type-chapter-selection .layout-builder__layout > [class*="col-"]:has(.field--name-field-chapter-media) {
    order: 1; flex: 0 0 100%; max-width: 100%;
  }
  .page-node-type-chapter-selection .layout-builder__layout > [class*="col-"]:has(.field--name-field-previous-video) {
    order: 2; flex: 0 0 50%; max-width: 50%;
  }
  .page-node-type-chapter-selection .layout-builder__layout > [class*="col-"]:has(.field--name-field-next-video) {
    order: 3; flex: 0 0 50%; max-width: 50%; margin-left: auto;
  }
  .page-node-type-chapter-selection .field--name-field-previous-video a,
  .page-node-type-chapter-selection .field--name-field-previous-video a:hover,
  .page-node-type-chapter-selection .field--name-field-next-video a,
  .page-node-type-chapter-selection .field--name-field-next-video a:hover {
    display: block;
    float: none;
    width: 100%;
    max-width: 231px;
    height: 67px;
    margin: 15px 0 0;
    text-indent: -9999px;
    overflow: hidden;
  }
  .page-node-type-chapter-selection .field--name-field-previous-video a,
  .page-node-type-chapter-selection .field--name-field-previous-video a:hover {
    background: url(/sites/default/files/previous.png) no-repeat left center;
  }
  .page-node-type-chapter-selection .field--name-field-next-video a,
  .page-node-type-chapter-selection .field--name-field-next-video a:hover {
    background: url(/sites/default/files/next-no-bg.png) no-repeat right center;
    margin-left: auto;
  }

  /* FOOTER: same parchment strip and link style as desktop, but not fixed.
     footer-bg00.png is only 157px tall (sized for the fixed desktop footer),
     so the taller mobile footer continues with a tileable strip of its texture. */
  body .dxpr-theme-footer {
    background:
      url(/sites/default/files/themes/footer-bg00.png) repeat-x top center,
      url(../images/footer-bg-fill.jpg) repeat center 157px;
    text-align: center;
    margin-top: 0;
    padding: 30px 0 10px;
  }
  /* Space above the footer inside the content area, so it takes the page's
     colour (black on the front page) instead of showing the body background. */
  .wrap-containers { padding-bottom: 40px; }
  ul.navbar-nav[data-block="footer"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    gap: 0 18px;
    margin: 15px 0 0;
    padding: 0;
  }
  ul.navbar-nav[data-block="footer"] > li.nav-item { display: inline-flex; align-items: center; }
  /* Hide DXPR's chevron bullets on footer links. */
  .region-footer ul[data-block="footer"] li a::before { display: none; }
  ul.navbar-nav[data-block="footer"] a.nav-link {
    padding: 6px 0;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Crimson Text", "Times", "Times New Roman", Georgia, serif;
    font-size: 1.1em;
    color: #402819 !important;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  }
  /* Social icons: undo the desktop float/negative margin in the block body. */
  #block-thehopeproject-copyright .field--name-body > div[style*="margin-top"] {
    float: none !important;
    margin-top: 15px !important;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  #block-thehopeproject-copyright article.align-left { float: none; margin: 0; }
}

/* FRONT PAGE TILES: gutter between the two tiles when they sit side by side
   (core twocol splits at 40em). */
@media (min-width: 40em) and (max-width: 1200px) {
  .front-page .layout--twocol > .layout__region--first { padding-right: 10px; }
  .front-page .layout--twocol > .layout__region--second { padding-left: 10px; }
}

/* ==========================================================================
   Phones only (up to 767px, where Bootstrap columns stack)
   ========================================================================== */

@media (max-width: 767px) {

  /* LANGUAGE OPTIONS: the three columns stack into one list, so keep the
     usual gap after the last language in each column. */
  .page-node-199 .layout-builder__layout > [class*="col-"] .field--name-body p:last-child { margin-bottom: 1rem; }

  /* STUDY GUIDE: video, then lesson, then the lesson list. */
  .study-guide .layout-builder__layout > .col-md-4 { display: contents; }
  .study-guide .layout-builder__layout .sticky-wrapper {
    order: 1;
    flex: 0 0 100%;
    max-width: 100%;
    height: auto !important;
    padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5);
    margin-bottom: 20px;
  }
  /* Undo the sticky script's inline fixed positioning. */
  .study-guide .layout-builder__layout .sticky-wrapper > section {
    position: static !important;
    width: auto !important;
    top: auto !important;
  }
  .study-guide .layout-builder__layout > .col-md-8 { order: 2; }
  .study-guide .layout-builder__layout .block-system-menu-blockside-menu {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 20px calc(var(--bs-gutter-x, 1.5rem) * .5) 0;
    margin-top: 30px;
    border-top: 1px solid rgba(64, 40, 25, 0.2);
  }
}

/* Study guide tables (e.g. Knowing God): gap between the two columns.
   padding-inline-end keeps the gap between columns in RTL languages too. */
.page-node-type-study-guide .field--name-body table th:not(:last-child),
.page-node-type-study-guide .field--name-body table td:not(:last-child) {
  padding-inline-end: 20px;
}

/* Language Options page (node 199): the three column blocks are filled in
   alphabetical order (column by column), so flatten them into one grid that
   reads across on wider screens, like D7, and stays alphabetical when it
   stacks on phones. */
.language-options .layout.row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 30px;
}
.language-options .layout.row > div,
.language-options .layout.row .block,
.language-options .layout.row .field--name-body {
  display: contents;
}
@media (min-width: 768px) {
  .language-options .layout.row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Language Options page: link size and centering from D7's .language-link. */
.language-options .layout.row p {
  min-height: 55px;
  margin: 0;
}
.language-options .layout.row a {
  display: block;
  margin: 10px 0;
  font-size: 22px;
  line-height: 1.4em;
  text-align: center;
}

/* Language Options page: highlight the language being viewed, like D7's
   .current-language. Each list link carries hreflang and the page carries
   <html lang>, so one selector per site language matches them. */
html[lang="en"] .language-options a[hreflang="en"],
html[lang="spa-afro"] .language-options a[hreflang="spa-afro"],
html[lang="am"] .language-options a[hreflang="am"],
html[lang="ar"] .language-options a[hreflang="ar"],
html[lang="az"] .language-options a[hreflang="az"],
html[lang="en-African"] .language-options a[hreflang="en-African"],
html[lang="fa"] .language-options a[hreflang="fa"],
html[lang="fr"] .language-options a[hreflang="fr"],
html[lang="cab"] .language-options a[hreflang="cab"],
html[lang="de"] .language-options a[hreflang="de"],
html[lang="ht"] .language-options a[hreflang="ht"],
html[lang="he"] .language-options a[hreflang="he"],
html[lang="hi"] .language-options a[hreflang="hi"],
html[lang="hu"] .language-options a[hreflang="hu"],
html[lang="hu-roma"] .language-options a[hreflang="hu-roma"],
html[lang="id"] .language-options a[hreflang="id"],
html[lang="ja"] .language-options a[hreflang="ja"],
html[lang="km"] .language-options a[hreflang="km"],
html[lang="lo"] .language-options a[hreflang="lo"],
html[lang="zh"] .language-options a[hreflang="zh"],
html[lang="orya"] .language-options a[hreflang="orya"],
html[lang="pt"] .language-options a[hreflang="pt"],
html[lang="por-st"] .language-options a[hreflang="por-st"],
html[lang="ro"] .language-options a[hreflang="ro"],
html[lang="ru"] .language-options a[hreflang="ru"],
html[lang="es"] .language-options a[hreflang="es"],
html[lang="tl"] .language-options a[hreflang="tl"],
html[lang="tau"] .language-options a[hreflang="tau"],
html[lang="te"] .language-options a[hreflang="te"],
html[lang="th"] .language-options a[hreflang="th"],
html[lang="adx"] .language-options a[hreflang="adx"],
html[lang="khg"] .language-options a[hreflang="khg"],
html[lang="tib-mandarin"] .language-options a[hreflang="tib-mandarin"],
html[lang="tca"] .language-options a[hreflang="tca"],
html[lang="trc"] .language-options a[hreflang="trc"],
html[lang="tr"] .language-options a[hreflang="tr"],
html[lang="uk"] .language-options a[hreflang="uk"],
html[lang="ur"] .language-options a[hreflang="ur"],
html[lang="vi"] .language-options a[hreflang="vi"],
html[lang="oym"] .language-options a[hreflang="oym"],
html[lang="ne"] .language-options a[hreflang="ne"],
html[lang="bod"] .language-options a[hreflang="bod"],
html[lang="tk"] .language-options a[hreflang="tk"] {
  border: 1px solid #fea026;
  color: #fea026;
}

/* Basic pages (About, Resources, Spiritual Help...): narrow text column and
   page title like D7's .main-container (max 1080px / ~980px on desktop,
   80% then 85% of the screen on smaller devices). */
.page-node-type-page .main-container.container,
.page-node-type-page .page-title-container.container {
  max-width: 980px;
}
@media (max-width: 1023px) {
  .page-node-type-page .main-container.container,
  .page-node-type-page .page-title-container.container {
    max-width: 80%;
  }
}
@media (max-width: 480px) {
  .page-node-type-page .main-container.container,
  .page-node-type-page .page-title-container.container {
    max-width: 85%;
  }
}

/* Footer, bottom right (D7 region-footer-right): Mars Hill Productions logo
   with the "Help Reach Them" video thumbnail to its right. They are separate
   blocks; the thumbnail block is only placed for English. */
#block-thehopeproject-footer-right-logos,
#block-thehopeproject-footer-help-reach {
  padding-top: 10px;
}
#block-thehopeproject-footer-right-logos article.media,
#block-thehopeproject-footer-help-reach article.media {
  float: none;
  display: block;
  margin: 0;
}
.footer-mars-hill img {
  display: block;
  width: 78px;
  height: auto;
}
/* 40% smaller than D7's 125px. */
.footer-help-reach img {
  display: block;
  width: 75px;
  height: auto;
}
@media (min-width: 1201px) {
  .dxpr-theme-footer .region-footer {
    position: relative;
  }
  #block-thehopeproject-footer-right-logos,
  #block-thehopeproject-footer-help-reach {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #block-thehopeproject-footer-help-reach {
    right: 30px;
  }
  /* Logo sits 14px left of the 75px thumbnail; on its own when there's none. */
  #block-thehopeproject-footer-right-logos {
    right: 119px;
  }
  .region-footer:not(:has(#block-thehopeproject-footer-help-reach)) #block-thehopeproject-footer-right-logos {
    right: 30px;
  }
}
@media (max-width: 1200px) {
  #block-thehopeproject-footer-right-logos,
  #block-thehopeproject-footer-help-reach {
    display: inline-block;
    vertical-align: middle;
    margin: 15px 7px 0;
  }
}