/* =========================================================
   OJS 3.5 — Bootstrap 3 Base Theme (CLEAN + MOBILE SAFE)
   Keeps your final desktop look, fixes mobile navbar collapse.
   Colors:
     Primary  : #e7d08b
     Secondary: #e8e9e4
     Accent   : #b5946a
   Font: system-ui
   ========================================================= */

/* ---------- 0) Base ---------- */
html, body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: 14px !important;          /* FINAL state in your code */
  color: #1f2937;
  background: #e8e9e4 !important;      /* secondary */
}

a{ color: #6b4e2e; }
a:hover{ color: #4a341e; }

/* Container (FINAL state: 1240) */
@media (min-width: 1200px){
  .container{ width: 1240px !important; max-width: 1240px !important; }
}

/* OJS main surfaces */
.pkp_structure_main,
.pkp_structure_content{
  background: transparent;
}

/* White page canvas (FINAL padding: 18) */
.pkp_structure_main .page,
.page{
  background: #fff !important;
  border: 1px solid rgba(181,148,106,0.25) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 18px rgba(17,24,39,0.06) !important;
  padding: 18px !important;
}

/* Reading comfort + justify (desktop) */
.pkp_structure_main p,
.pkp_structure_main li,
.page_content p,
.page_content li{
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
}

/* Small screens: avoid justify gaps */
@media (max-width: 576px){
  .pkp_structure_main p,
  .page_content p{ text-align: left; }
}

/* ---------- 1) Navbar base ---------- */
.navbar,
.navbar-default{
  background: #e7d08b !important;
  border: 0 !important;
  border-bottom: 5px solid #b5946a !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important; /* you had this */
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.navbar .container{
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Brand (DESKTOP final: one-row, flex) */
.navbar-default .navbar-brand{
  float: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  width: auto !important;
  padding: 0px 155px !important;
  margin: 0 !important;

  height: auto !important;
  white-space: normal !important;

  color: #2b1f12 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  overflow: visible !important;
}

/* Logo (DESKTOP final: 115x161) */
.navbar-default .navbar-brand img{
  width: 60px !important;
  height: 90px !important;
  object-fit: contain !important;
  display: inline-block !important;
  max-width: none !important;
  max-height: none !important;
}

/* Title injected (your final state) */
.navbar-default .navbar-brand:after{
  content: "Horizons Intermediary Journal of Business Research" !important;
  display: inline-block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2b1f12 !important;
}

/* Nav links */
.navbar-default .navbar-nav > li > a{
  color: #2b1f12 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 13px !important;
  padding-top: 28px !important;
  padding-bottom: 8px !important;
  line-height: 8px !important; /* match search */
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover{
  background: transparent !important;
  color: #000 !important;
  box-shadow: inset 0 -3px 0 #b5946a !important;
}

/* Collapse area (DESKTOP keep aligned) */
.navbar-default .navbar-collapse{
  float: left !important;
  width: auto !important;
}

/* ---------- 2) Search (FINAL visual: pill + 40px height in desktop) ---------- */
.navbar-form{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

/* Pill input */
.navbar-form .form-control,
.navbar-form input[type="search"],
.navbar-form input[type="text"]{
  height: 40px !important;
  width: 280px !important;
  border-radius: 999px !important;
  border: 2px solid #b5946a !important;
  background: #fff !important;
  color: #2b1f12 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-shadow: none !important;
  outline: none !important;
}

.navbar-form .form-control::placeholder{
  color: rgba(43,31,18,0.55) !important;
}

.navbar-form .form-control:focus{
  box-shadow: 0 0 0 4px rgba(181,148,106,0.18) !important;
  border-color: #b5946a !important;
}

/* Pill button */
.navbar-form .btn,
.navbar-form button,
.navbar-form input[type="submit"]{
  height: 40px !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  background: #b5946a !important;
  border: 2px solid #b5946a !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.navbar-form .btn:hover,
.navbar-form button:hover,
.navbar-form input[type="submit"]:hover{
  filter: brightness(0.97);
}

/* Make navbar layout flex ONLY on desktop/tablet (as you had) */
@media (min-width: 768px){
  .navbar-default .container{
    display: flex !important;
    align-items: center !important;

  }

  .navbar-default .navbar-header{
    display: flex !important;
    align-items: center !important;
    margin-right: 18px !important;
    float: left !important;
    width: auto !important;
  }

  .navbar-default .navbar-collapse{
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
  }

  .navbar-default .navbar-nav{
margin: 0 !important;
  margin-left: 133px !important;    }
}

/* ---------- 3) Layout: sidebar left on desktop ---------- */
@media (min-width: 992px){
  .pkp_structure_content:after{
    content: "";
    display: table;
    clear: both;
  }

  .pkp_structure_sidebar{
    float: left !important;
    width: 26% !important;
    padding-right: 18px !important;
    margin-top: 50px !important;
  }

  .pkp_structure_main{
    float: right !important;
    width: 74% !important;
    margin-top: 22px !important;
  }
}

/* Mobile/tablet: stack */
@media (max-width: 991.98px){
  .pkp_structure_sidebar,
  .pkp_structure_main{
    float: none !important;
    width: 100% !important;
  }
}

/* ---------- 4) Sidebar "JOURNAL CONTENT" header (desktop only) ---------- */
@media (min-width: 992px){
  .pkp_structure_sidebar:before{
    content: "JOURNAL CONTENT";
    display: block;
    background: #b5946a;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    padding: 14px 16px;
    border-radius: 4px;
    margin-bottom: 12px;
    position: relative;
  }

  .pkp_structure_sidebar:after{
    content: "";
    display: block;
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #b5946a;
    margin-left: 18px;
    margin-top: -6px;
    margin-bottom: 12px;
  }
}

/* ---------- 5) Sidebar blocks ---------- */
.pkp_block,
.block_information,
.block_language{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}

/* Block title bar (NO chevron - final state) */
.pkp_block .title,
.block_information .title,
.block_language .title{
  display: block !important;
  background: #e7d08b !important;
  border: 1px solid #b5946a !important;
  color: #2b1f12 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  padding: 14px 14px !important;
  border-radius: 4px !important;
  margin: 0 0 8px 0 !important;
}

/* Block content */
.pkp_block .content,
.block_information .content,
.block_language .content{
  background: #fff !important;
  border: 1px solid rgba(181,148,106,0.25) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
}

/* Lists */
.pkp_block ul,
.block_information ul,
.block_language ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.pkp_block ul li,
.block_information ul li,
.block_language ul li{
  margin: 0 !important;
  border-bottom: 1px solid rgba(181,148,106,0.20) !important;
}

.pkp_block ul li:last-child,
.block_information ul li:last-child,
.block_language ul li:last-child{
  border-bottom: 0 !important;
}

.pkp_block ul li a,
.block_information ul li a,
.block_language ul li a{
  display: block !important;
  padding: 10px 10px !important;
  color: #6b4e2e !important;
  text-decoration: none !important;
  border-radius: 2px !important;
}

.pkp_block ul li a:hover,
.block_information ul li a:hover,
.block_language ul li a:hover{
  background: #e8e9e4 !important;
}

/* ---------- 6) Buttons ---------- */
a.btn, .btn, .pkp_button, .cmp_button, input[type="submit"]{
  border-radius: 3px !important;
}

.btn-primary, .pkp_button, .cmp_button, input[type="submit"]{
  background: #b5946a !important;
  border: 1px solid rgba(43,31,18,0.25) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.btn-primary:hover, .pkp_button:hover, .cmp_button:hover, input[type="submit"]:hover{
  filter: brightness(0.97);
}

.block_make_submission,
.pkp_block.block_make_submission{
  margin-top: 12px !important;
}

/* Remove arrows under make submission (final state) */
.block_make_submission:before,
.block_make_submission:after,
.pkp_block.block_make_submission:before,
.pkp_block.block_make_submission:after{
  content: "" !important;
  display: none !important;
}

/* ---------- 7) Footer ---------- */
.pkp_structure_footer_wrapper,
footer{
  background: #2b1f12 !important;
  color: #fff !important;
  border-top: 2px solid #b5946a !important;
}

.pkp_structure_footer,
footer .container{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.pkp_structure_footer a,
footer a{
  color: #fff !important;
  text-decoration: underline;
}

.pkp_structure_footer a:hover,
footer a:hover{
  opacity: 0.9;
}

/* Dropdown menu hover underline */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
  text-decoration: none !important;
  border-bottom: 2px solid #b5946a !important;
  padding-bottom: 6px !important;
}

/* =========================================================
   MOBILE SAFETY LAYER (Most important part)
   Keeps desktop look but restores Bootstrap behavior on phones
   ========================================================= */
@media (max-width: 767px){

  /* 1) Restore Bootstrap collapsing layout */
  .navbar-default .container{
    display: block !important;
  }

  .navbar-default .navbar-header,
  .navbar-default .navbar-collapse{
    float: none !important;
    width: 100% !important;
  }

  .navbar-default .navbar-collapse{
    clear: both !important;
  }

  /* 2) Make brand not huge on mobile */
  .navbar-default .navbar-brand{
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  /* 3) Logo responsive (NO fixed height on mobile) */
  .navbar-default .navbar-brand img{
    width: auto !important;
    height: auto !important;
    max-height: 60px !important;
    max-width: 45% !important;
  }

/* 4) Show journal title next to logo on mobile, centered vertically */
.navbar-default .navbar-brand:after{
  content: "Horizons Intermediary Journal of Business Research" !important;
  display: inline-block !important;

  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #2b1f12 !important;

  /* center text vertically with logo */
  align-self: center !important;

  /* keep it readable on small screens */
  max-width: 60% !important;
  white-space: normal !important;
}

  /* 5) Search takes full width */
  .navbar-form{
    display: block !important;
    margin: 10px 12px !important;
  }

  .navbar-form .form-control,
  .navbar-form input[type="search"],
  .navbar-form input[type="text"]{
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
  }

  .navbar-form .btn,
  .navbar-form button,
  .navbar-form input[type="submit"]{
    width: 100% !important;
    margin-top: 8px !important;
    height: 40px !important;
  }
}

/* Tiny phones: keep search from being too narrow */
@media (max-width: 480px){
  .navbar-form .form-control,
  .navbar-form input[type="search"],
  .navbar-form input[type="text"]{
    width: 100% !important;
  }
}

/* Desktop: ثبت البحث أقصى اليمين داخل الهيدر */
@media (min-width: 768px){

  /* خَلّي الكونتينر مرجع للتموضع */
  .navbar-default .container{
    position: relative !important;
  }

  /* ثبت البحث يمين ووسط عموديًا */
  .navbar-default .navbar-form{
    position: absolute !important;
    right: 155px !important;      /* غيّرها لو بدك مسافة أكبر/أقل من اليمين */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
    float: none !important;
  }

  /* (اختياري) اعمل مساحة يمين حتى ما يتداخل مع البحث */
  .navbar-default .navbar-collapse{
    padding-right: 360px !important;  /* عدّلها حسب عرض صندوق البحث */
  }
}

/* Mobile: رجّع البحث طبيعي (كما عندك) */
@media (max-width: 767px){
  .navbar-default .navbar-form{
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
  }

  .navbar-default .navbar-collapse{
    padding-right: 0 !important;
  }
}