/* ============================================================
   MJSTS — Mustansiriyah Journal of Sustainable Tourism Sciences
   Theme v2 — Warm editorial identity, built around the journal seal
   Palette:
     Deep teal   #0d3b36   (header / footer / sidebar headers)
     Terracotta  #c1652f   (links / accents / CTA)
     Cream       #faf7f0   (page background)
     Seal teal   #1fa29c / Seal silver #c8d0d3 (from the official emblem)
   Base: Bootstrap 3 Base Theme (Readable) — overridden below
   ============================================================ */

/* ---------- Web fonts (Latin serif + Arabic + sans for UI) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Noto+Naskh+Arabic:wght@400;600;700&family=Merriweather:wght@400;700&display=swap');

/* ---------- Brand variables (same names, new values — every rule below inherits the new palette) ---------- */
:root{
  --mu-navy:#0d3b36;
  --mu-navy-2:#123f39;
  --mu-cyan:#c1652f;
  --mu-cyan-dk:#a04f22;
  --mu-orange:#a04f22;
  --mu-gold:#c1652f;
  --mu-bg:#faf7f0;
  --mu-card:#ffffff;
  --mu-ink:#2b2620;
  --mu-muted:#6b6355;
  --mu-border:#e6ded0;
  --mu-seal-teal:#1fa29c;
  --mu-seal-silver:#c8d0d3;
  --mu-true-gold:#c9a227;
  --mu-true-gold-dk:#a9861e;
  --mu-maroon:#8a2332;
  --mu-maroon-dk:#5c1620;
}

/* ============================================================
   LANGUAGE TOGGLE (bilingual blocks) — kept from original
   ============================================================ */
html[dir="rtl"] .en{display:none!important;}
html[dir="ltr"] .ar{display:none!important;}

/* ============================================================
   GLOBAL — warm, editorial
   ============================================================ */
body{
  background:var(--mu-bg)!important;
  color:var(--mu-ink)!important;
  font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
}
html[dir="rtl"] body{
  font-family:'Noto Naskh Arabic','Cairo',Tahoma,Arial,sans-serif;
}

h1,h2,h3,h4,h5{
  color:var(--mu-navy);
  font-family:'Merriweather',Georgia,'Times New Roman',serif;
  font-weight:700;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{
  font-family:'Noto Naskh Arabic','Cairo',serif;
}

a{color:var(--mu-cyan);text-decoration:none;}
a:hover,a:focus{color:var(--mu-cyan-dk);text-decoration:underline;}

/* Thin brand strip at the very top */
body::before{
  content:"";display:block;height:5px;width:100%;
  background:linear-gradient(90deg,var(--mu-seal-teal) 0%,var(--mu-navy) 60%,var(--mu-cyan) 100%);
}

/* ============================================================
   HEADER / NAVBAR — deep teal, flat single-row menu
   ============================================================ */
.navbar,.navbar-default,.pkp_structure_head,header.header{
  background:var(--mu-navy)!important;
  background-image:none!important;
  border:none!important;
  box-shadow:0 2px 8px rgba(13,59,54,.22);
  backdrop-filter:none!important;
}
.navbar-default .navbar-nav > li > a,
.pkp_structure_head a,
.navbar-default .navbar-brand{
  color:#eef6f4!important;
  font-weight:600;
}
.navbar-default .navbar-nav{display:flex;flex-wrap:wrap;}
.navbar-default .navbar-nav > li > a{
  padding:12px 14px;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.pkp_structure_head a:hover{
  color:#fff!important;
  background:rgba(193,101,47,.16)!important;
  border-bottom-color:var(--mu-cyan);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a{
  background:var(--mu-cyan)!important;color:#fff!important;border-bottom-color:transparent;
}
.dropdown-menu > li > a{color:var(--mu-ink)!important;}
.dropdown-menu > li > a:hover{background:var(--mu-cyan)!important;color:#fff!important;}

/* Search button in header */
.navbar .btn,.navbar button{
  background:var(--mu-cyan)!important;border:none!important;color:#fff!important;
}

/* ---------- Interactive journal seal (logo) ---------- */
.navbar-brand-logo img,
.pkp_site_name img,.page_header img{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
  border-radius:50%;
}
.navbar-brand-logo:hover img,
.pkp_site_name:hover img{
  transform:scale(1.12) rotate(6deg);
  filter:drop-shadow(0 0 0 3px rgba(193,101,47,.35)) drop-shadow(0 4px 10px rgba(13,59,54,.3));
}

/* ============================================================
   JOURNAL MASTHEAD / PAGE HEADER (logo banner)
   ============================================================ */
.pkp_structure_page > .pkp_site_name_wrapper,
.page_header,.header_view{
  background:var(--mu-card);
}
.pkp_brand_footer,.pkp_site_name img,.page_header img{
  max-width:100%;
}
.obj_journal_index_about,.cmp_journal_index_homepage,
.homepage_about,.about_journal{
  background:var(--mu-card);
  border:1px solid var(--mu-border);
  border-top:4px solid var(--mu-cyan);
  border-radius:10px;
  padding:24px 28px;
  margin-bottom:24px;
  box-shadow:0 4px 14px rgba(13,59,54,.07);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.pkp_structure_main{padding-top:24px;}
.page,.cmp_announcement,.obj_issue_toc,.main_content{
  color:var(--mu-ink);
}

/* Article / issue cards */
.obj_article_summary,.obj_issue_summary,.cmp_announcement{
  background:var(--mu-card)!important;
  border:1px solid var(--mu-border)!important;
  border-radius:12px!important;
  padding:18px 20px!important;
  margin-bottom:18px!important;
  box-shadow:0 3px 12px rgba(13,59,54,.05)!important;
  backdrop-filter:none!important;
  transition:box-shadow .2s ease, transform .2s ease;
}
.obj_article_summary:hover,.obj_issue_summary:hover{
  box-shadow:0 8px 22px rgba(193,101,47,.18)!important;
  transform:translateY(-2px);
}
.obj_article_summary .title a{color:var(--mu-navy)!important;font-weight:700;}
.obj_article_summary .title a:hover{color:var(--mu-cyan)!important;}
.obj_article_summary .authors{color:var(--mu-muted);}

/* ============================================================
   SIDEBAR — clean cards with brand accent
   ============================================================ */
.pkp_structure_sidebar .pkp_block{
  background:var(--mu-card);
  border:1px solid var(--mu-border);
  border-radius:12px;
  padding:0 0 14px;
  margin-bottom:20px;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(13,59,54,.05);
}
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .pkp_block h2,
.pkp_structure_sidebar .pkp_block h3{
  background:var(--mu-navy);
  color:#fff;
  margin:0 0 12px;
  padding:12px 16px;
  font-size:1.05rem;
  border-left:4px solid var(--mu-cyan);
}
html[dir="rtl"] .pkp_structure_sidebar .pkp_block .title{
  border-left:none;border-right:4px solid var(--mu-cyan);
}
.pkp_structure_sidebar .pkp_block .content,
.pkp_structure_sidebar .pkp_block ul{
  padding:0 16px;
}
.pkp_block_web_feed .item img,
.pkp_block.pkp_block_web_feed img{
  height:18px;width:auto;opacity:.55;
}
.pkp_block_web_feed:hover img{opacity:.85;}

.pkp_block_languageToggle ul li a{
  display:inline-block;padding:4px 14px;margin:2px;
  border:1px solid var(--mu-cyan);border-radius:20px;color:var(--mu-cyan);
}
.pkp_block_languageToggle ul li a:hover{background:var(--mu-cyan);color:#fff;text-decoration:none;}

/* ============================================================
   BUTTONS
   ============================================================ */
button,.pkp_button,.btn-primary,input[type="submit"]{
  background:var(--mu-cyan)!important;
  border:1px solid var(--mu-cyan-dk)!important;
  color:#fff!important;
  padding:8px 18px!important;
  border-radius:8px!important;
  font-weight:600;
}
button:hover,.pkp_button:hover,.btn-primary:hover{
  background:var(--mu-cyan-dk)!important;
}
.btn-cta,.cmp_button_cta{
  background:var(--mu-orange)!important;border-color:#7a3c19!important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.pkp_structure_footer,footer.footer{
  background:var(--mu-navy)!important;
  color:#cfe3dc!important;
  border-top:4px solid var(--mu-cyan);
  padding:28px 0;
}
.pkp_structure_footer a,footer.footer a{color:#8fd6c9!important;}

/* ============================================================
   MISC POLISH
   ============================================================ */
hr{border-top:2px solid var(--mu-cyan);opacity:.5;}
.cmp_breadcrumbs{color:var(--mu-muted);}
table.pkp_table thead{background:var(--mu-navy);color:#fff;}
::selection{background:var(--mu-cyan);color:#fff;}

/* ============================================================
   Phase 3 polish pass — typography scale, tables, badges,
   focus states, print, anchors (kept from prior phase)
   ============================================================ */
html{scroll-behavior:smooth;}
h1[id],h2[id],h3[id],div[id]{scroll-margin-top:90px;}

h1{font-size:2rem;line-height:1.25;margin:0 0 .6em;}
h2{font-size:1.5rem;line-height:1.3;margin:1.4em 0 .6em;}
h3{font-size:1.25rem;line-height:1.35;margin:1.2em 0 .5em;}
h4{font-size:1.08rem;line-height:1.4;margin:1em 0 .4em;}
p{margin:0 0 1em;}
.page,.main_content{font-size:16px;}

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,.pkp_button:focus-visible{
  outline:3px solid var(--mu-cyan)!important;
  outline-offset:2px;
  border-radius:4px;
}

blockquote{
  border-left:4px solid var(--mu-cyan);
  background:#fbeee4;
  color:var(--mu-navy);
  padding:14px 18px;
  border-radius:8px;
  margin:0 0 1.2em;
}
html[dir="rtl"] blockquote{border-left:none;border-right:4px solid var(--mu-cyan);}

table{border-collapse:separate;border-spacing:0;width:100%;}
table.pkp_table,table.listing{
  border:1px solid var(--mu-border);
  border-radius:10px;
  overflow:hidden;
}
table.pkp_table tbody tr:nth-child(even),
table.listing tbody tr:nth-child(even){background:var(--mu-bg);}
table.pkp_table tbody tr:hover,
table.listing tbody tr:hover{background:#fbeee4;}
table.pkp_table td,table.pkp_table th,
table.listing td,table.listing th{
  padding:10px 14px;border-color:var(--mu-border);
}

/* ---------- Keyword / domain badges — consistent size, distinct color per domain, 3D hover ---------- */
.mu-badge{
  display:inline-block;
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.3px;
  line-height:1.3;
  padding:7px 16px;
  border-radius:999px;
  cursor:default;
  background:linear-gradient(135deg,var(--mu-cyan),var(--mu-cyan-dk));
  box-shadow:0 2px 5px rgba(0,0,0,.18);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
  will-change:transform;
}
.mu-badge:hover,.mu-badge:focus-visible{
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 12px 20px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.18);
}
/* Tourism Sciences — terracotta (brand primary) */
.mu-badge-tourism{background:linear-gradient(135deg,var(--mu-cyan),var(--mu-cyan-dk));}
/* Administrative Sciences — seal teal */
.mu-badge-admin{background:linear-gradient(135deg,var(--mu-seal-teal),#157d78);}
/* Economic Sciences — true gold */
.mu-badge-econ{background:linear-gradient(135deg,var(--mu-true-gold),var(--mu-true-gold-dk));}
/* Sustainable Development — maroon / blood red */
.mu-badge-sustain{background:linear-gradient(135deg,var(--mu-maroon),var(--mu-maroon-dk));}
/* Legacy aliases kept for backward compatibility */
.mu-badge-gold{background:linear-gradient(135deg,var(--mu-seal-teal),#157d78);}

.pagination > li > a,.pagination > li > span{
  color:var(--mu-navy)!important;border-color:var(--mu-border)!important;
}
.pagination > .active > a,.pagination > .active > span{
  background:var(--mu-cyan)!important;border-color:var(--mu-cyan)!important;color:#fff!important;
}
.pagination > li > a:hover{background:#fbeee4!important;}

input[type="text"],input[type="email"],input[type="password"],
input[type="search"],textarea,select{
  border:1px solid var(--mu-border)!important;
  border-radius:8px!important;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,
textarea:focus,select:focus{
  border-color:var(--mu-cyan)!important;
  box-shadow:0 0 0 3px rgba(193,101,47,.15)!important;
}

.skip-link,a[href="#main-content"]{
  background:var(--mu-navy);color:#fff!important;
  padding:8px 16px;border-radius:0 0 8px 0;
}

/* ---------- Vertical keyword sidebar block (homepage) ---------- */
.mu-keyword-sidebar{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 16px;
}
.mu-keyword-sidebar .mu-badge{
  width:100%;
  text-align:center;
  box-sizing:border-box;
}

@media (max-width:768px){
  h1{font-size:1.6rem;}
  h2{font-size:1.3rem;}
  .obj_article_summary,.obj_issue_summary,.cmp_announcement{padding:14px 16px!important;}
  .navbar-default .navbar-nav > li > a{padding:9px 10px;font-size:.85rem;}
}

@media print{
  .navbar,.pkp_structure_head,.pkp_structure_sidebar,
  .pkp_structure_footer,footer.footer,body::before{display:none!important;}
  body{background:#fff!important;color:#000!important;}
  a{color:#000!important;text-decoration:underline;}
}

/* ============================================================
   MJSTS — Phase 4: shrunk plain-text keywords, college location
   box, colored About-page axis headings, animated dual-logo header
   ============================================================ */

.mu-keyword-plain{
  display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;
  padding:6px 4px 2px;
}
.mu-kw{
  font-size:13px;font-weight:600;cursor:default;
  transition:transform .18s ease,filter .18s ease;
  display:inline-block;
}
.mu-kw:hover{transform:scale(1.16);filter:brightness(1.12);}
.mu-kw-tourism{color:var(--mu-cyan-dk);}
.mu-kw-admin{color:var(--mu-seal-teal);}
.mu-kw-econ{color:var(--mu-true-gold-dk);}
.mu-kw-sustain{color:var(--mu-maroon-dk);}
.mu-keyword-more{text-align:center;width:100%;margin:8px 0 0;font-size:.78rem;}
.mu-keyword-more a{color:var(--mu-cyan-dk);}

.mu-location-content{padding:10px;}
.mu-location-box{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  background:var(--mu-bg);border:1px solid var(--mu-border);border-radius:10px;padding:14px;
}
.mu-location-icon{
  width:44px;height:44px;border-radius:50%;background:var(--mu-seal-teal);
  display:flex;align-items:center;justify-content:center;
}
.mu-location-title{font-weight:700;color:var(--mu-navy);font-size:14px;}
.mu-location-sub{font-size:12px;color:#6b6a63;}
.mu-location-btn{
  display:inline-block;margin-top:4px;background:var(--mu-cyan);color:#fff!important;
  font-size:12px;padding:6px 14px;border-radius:8px;text-decoration:none;
}
.mu-location-btn:hover{background:var(--mu-cyan-dk);}

.mu-axis-heading{padding:4px 14px;display:inline-block;border-radius:0;}
html[dir="rtl"] .mu-axis-heading{border-right:4px solid;}
html:not([dir="rtl"]) .mu-axis-heading{border-left:4px solid;}
.mu-axis-teal{border-color:var(--mu-seal-teal);background:#e1f5ee;color:#085041;}
.mu-axis-gold{border-color:var(--mu-true-gold);background:#faeeda;color:#633806;}
.mu-axis-maroon{border-color:var(--mu-maroon);background:#fbeaf0;color:var(--mu-maroon-dk);}

.mu-logo-carousel{display:flex;justify-content:center;padding:18px 0 10px;}
.mu-logo-wrap{position:relative;width:110px;height:110px;}
.mu-logo-img{
  position:absolute;top:0;left:0;width:110px;height:110px;border-radius:50%;
  object-fit:cover;background:#fff;border:2px solid #fff;
}
.mu-logo-1{animation:muCross1 60s infinite;}
.mu-logo-2{animation:muCross2 60s infinite;}
.mu-logo-glow{
  position:absolute;top:-6px;left:-6px;width:122px;height:122px;border-radius:50%;
  box-shadow:0 0 14px 4px rgba(193,101,47,.5),0 0 26px 8px rgba(31,162,156,.35);
  animation:muPulse 3s ease-in-out infinite;pointer-events:none;
}
@keyframes muCross1{
  0%{opacity:1;transform:scale(1);}
  48%{opacity:1;transform:scale(1);}
  52%{opacity:0;transform:scale(.94);}
  98%{opacity:0;transform:scale(.94);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes muCross2{
  0%{opacity:0;transform:scale(.94);}
  48%{opacity:0;transform:scale(.94);}
  52%{opacity:1;transform:scale(1);}
  98%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(.94);}
}
@keyframes muPulse{
  0%,100%{box-shadow:0 0 14px 4px rgba(193,101,47,.5),0 0 26px 8px rgba(31,162,156,.35);}
  50%{box-shadow:0 0 20px 6px rgba(201,162,39,.6),0 0 34px 12px rgba(31,162,156,.5);}
}
@media(max-width:768px){
  .mu-logo-wrap,.mu-logo-img{width:88px;height:88px;}
  .mu-logo-glow{width:98px;height:98px;top:-5px;left:-5px;}
}

/* ============================================================
   MJSTS — Phase 5: map-embedded location box, renamed to Journal
   Location, and two distinct logo transition styles (fade+scale
   for the journal logo, fade+flip for the university seal)
   ============================================================ */

.mu-map-frame{
  width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  border:1px solid var(--mu-border);
}
.mu-map-frame iframe{width:100%;height:100%;border:0;display:block;}
.mu-location-caption{text-align:center;margin-top:10px;}
.mu-location-title{font-weight:700;color:var(--mu-navy);font-size:13px;line-height:1.4;}
.mu-location-sub{font-size:11.5px;color:#6b6a63;margin-top:2px;}
.mu-location-btn{
  display:block;text-align:center;margin-top:10px;background:var(--mu-cyan);
  color:#fff!important;font-size:12px;padding:7px 14px;border-radius:8px;text-decoration:none;
}
.mu-location-btn:hover{background:var(--mu-cyan-dk);}

.mu-logo-wrap{position:relative;width:110px;height:110px;perspective:600px;}
.mu-logo-img{
  position:absolute;top:0;left:0;width:110px;height:110px;border-radius:50%;
  object-fit:cover;background:#fff;border:2px solid #fff;
  backface-visibility:hidden;transform-style:preserve-3d;
}
.mu-logo-1{animation:muScaleFade1 60s infinite;}
.mu-logo-2{animation:muFlip2 60s infinite;}
@keyframes muScaleFade1{
  0%{opacity:1;transform:scale(1) rotateY(0deg);}
  46%{opacity:1;transform:scale(1) rotateY(0deg);}
  50%{opacity:0;transform:scale(.6) rotateY(0deg);}
  96%{opacity:0;transform:scale(.6) rotateY(0deg);}
  100%{opacity:1;transform:scale(1) rotateY(0deg);}
}
@keyframes muFlip2{
  0%{opacity:0;transform:scale(1) rotateY(-180deg);}
  46%{opacity:0;transform:scale(1) rotateY(-180deg);}
  50%{opacity:1;transform:scale(1) rotateY(0deg);}
  96%{opacity:1;transform:scale(1) rotateY(0deg);}
  100%{opacity:0;transform:scale(1) rotateY(-180deg);}
}

/* ============================================================
   MJSTS — Phase 6: clean dual-logo masthead banner (replaces the
   distorted homepageImage raster) + soft tone-on-tone navbar texture
   ============================================================ */

.homepage-image{display:none!important;}

.mu-masthead{
  display:flex;align-items:center;justify-content:center;gap:20px;
  background:var(--mu-bg);border-top:3px solid var(--mu-true-gold);
  border-bottom:3px solid var(--mu-cyan);padding:16px 14px;flex-wrap:wrap;
}
.mu-masthead-logo{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;object-fit:cover;
  border:2px solid #fff;box-shadow:0 0 0 1px var(--mu-border);
}
.mu-masthead-rule{width:1px;height:40px;background:var(--mu-true-gold);flex-shrink:0;}
.mu-masthead-text{text-align:center;}
.mu-masthead-title{
  font-size:18px;font-weight:700;color:var(--mu-navy);line-height:1.4;
  max-width:520px;
}
.mu-masthead-issn{
  font-size:12px;color:var(--mu-cyan-dk);letter-spacing:1px;margin-top:6px;
}
@media(max-width:640px){
  .mu-masthead{gap:12px;padding:12px 10px;}
  .mu-masthead-logo{width:42px;height:42px;}
  .mu-masthead-title{font-size:15px;max-width:220px;}
}

.navbar.navbar-default{
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0px,rgba(255,255,255,.03) 5px,transparent 5px,transparent 11px);
}

/* Phase 7: fix navbar stripe texture being overridden by an earlier
   `.navbar, .navbar-default, ... { background-image:none !important }`
   reset rule -- force our subtle diagonal stripe with matching !important
   so it actually renders. */
.navbar.navbar-default{
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 6px,transparent 6px,transparent 13px) !important;
}


/* Policy items click-highlight (submission-policy / about page) */
.mu-policy-item{transition:transform .15s ease, box-shadow .15s ease;}
.mu-policy-item:hover{transform:scale(1.01);}
.mu-policy-item:focus{outline:none; transform:scale(1.02); box-shadow:0 0 0 2px var(--mu-true-gold, #c9a227);}


/* Header logo - enlarged with soft glow pulse */
.navbar-brand-logo { height: auto !important; padding: 6px 15px !important; display: flex; align-items: center; }
.navbar-brand-logo img {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50%;
  animation: muLogoWave 3.2s ease-in-out infinite;
}
@keyframes muLogoWave {
  0%   { box-shadow: 0 0 0px 0px rgba(201,162,39,0.35), 0 0 6px 1px rgba(31,162,156,0.25); transform: scale(1); }
  50%  { box-shadow: 0 0 14px 5px rgba(201,162,39,0.55), 0 0 22px 10px rgba(31,162,156,0.35); transform: scale(1.035); }
  100% { box-shadow: 0 0 0px 0px rgba(201,162,39,0.35), 0 0 6px 1px rgba(31,162,156,0.25); transform: scale(1); }
}