/* ============================================================
   Journal of Data Insight for Multidisciplinary Sciences
   Header overrides — OJS 3.5 / Bootstrap 3 theme
   Upload at: Settings > Website > Appearance > Journal Style Sheet
   ------------------------------------------------------------
   SETUP REQUIRED for section 2:
     1. Settings > Website > Appearance > Logo  ->  DELETE the logo.
        (The theme shows a logo OR the title text, never both. With
        no logo, the journal name returns as real HTML.)
     2. Upload emblem-192.png somewhere that gives you a URL:
        open the Footer field, use the editor's image button, insert
        the image, switch to source view, copy the src, then delete
        the image from the footer and save. The file stays on disk.
     3. Paste that URL into --emblem-url below.
   ============================================================ */

:root {
  /* e.g. /public/journals/1/emblem-192.png
     Check the journal number — it is 1 only if this is your first
     journal on the installation. */
  --emblem-url: url("https://jdims.com/public/site/images/root_journal/emblem-192.png");
  --emblem-size: 72px;
  --title-size: 22px;
  --title-color: #000000;   /* title + wordmark colour */
}


/* ============================================================
   1. Un-cap the Bootstrap 3 navbar height
   Bootstrap pins .navbar-brand to height:50px with 15px padding,
   leaving 20px of content box. These rules release the whole
   height chain so the header can grow.
   ============================================================ */

#headerNavigationContainer.navbar,
#headerNavigationContainer .navbar-header {
  min-height: 0 !important;
  height: auto !important;
}

#headerNavigationContainer .site-name {
  height: auto !important;
  margin: 0 !important;
  float: none;
}

#headerNavigationContainer .navbar-brand,
#headerNavigationContainer .navbar-brand-logo {
  height: auto !important;
  padding: 12px 15px !important;
}


/* ============================================================
   2. Emblem + live text title
   The journal name stays selectable, translatable HTML; the
   emblem is painted in as a ::before box beside it.
   ============================================================ */

#headerNavigationContainer .navbar-brand {
  display: flex !important;
  align-items: center;
  gap: 14px;
  font-size: var(--title-size);
  line-height: 1.25;
  white-space: normal;      /* let the name wrap instead of overflowing */
  max-width: 620px;
  color: var(--title-color) !important;
}

#headerNavigationContainer .navbar-brand:hover,
#headerNavigationContainer .navbar-brand:focus {
  color: var(--title-color) !important;
  text-decoration: none;
}

#headerNavigationContainer .navbar-brand::before {
  content: "";
  flex: 0 0 auto;
  width: var(--emblem-size);
  height: var(--emblem-size);
  background: var(--emblem-url) no-repeat center / contain;
}

/* Homepage wraps the title in <h1 class="site-name">, other pages
   in a <div>. Neutralise the h1's inherited type scale.           */
#headerNavigationContainer h1.site-name {
  font-size: inherit !important;
  font-weight: inherit !important;
}


/* ============================================================
   3. Drop the primary nav onto its own row
   Mobile (<768px) is untouched so the hamburger still works.
   ============================================================ */

@media (min-width: 768px) {
  #headerNavigationContainer .navbar-header {
    float: none;
    width: 100%;
  }

  #headerNavigationContainer #nav-menu {
    clear: both;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  #headerNavigationContainer .navbar-nav {
    float: left;
    margin: 0;
  }
}


/* Nav links below the title. Uncomment to match the title colour;
   leave commented to keep them white on the blue bar. */
/*
#headerNavigationContainer .navbar-nav > li > a {
  color: var(--title-color) !important;
}
*/

/* ============================================================
   4. Small screens
   ============================================================ */

@media (max-width: 767px) {
  #headerNavigationContainer .navbar-brand {
    font-size: 16px;
    gap: 10px;
    max-width: calc(100% - 70px);   /* leave room for the hamburger */
  }

  #headerNavigationContainer .navbar-brand::before {
    width: 46px;
    height: 46px;
  }
}


/* ============================================================
   5. Kept in case you go back to an image logo
   Harmless while no logo is uploaded — there is no <img> to match.
   ============================================================ */

#headerNavigationContainer .navbar-brand img,
#headerNavigationContainer .site-name img {
  height: auto !important;
  max-height: 90px !important;
  width: auto !important;
  max-width: 100% !important;
}


/* ============================================================
   6. Optional: tint the nav row
   Uncomment to make the second row read as a distinct band.
   ============================================================ */

/*
@media (min-width: 768px) {
  #headerNavigationContainer #nav-menu {
    background: rgba(0, 0, 0, 0.10);
    margin: 0 -15px;
    padding: 0 15px;
  }
}
*/