/**
 * Theme Name: Travel World Journey v2
 * Template:   justnews
 * Version:    2.3.1
 */
/* 引入父主题样式 */
@import url("../justnews/css/style.css");

/* 
    START: su- shortcode plugin related CSS
*/

/* 当single文章在页面引用时候，隐藏发布时间 */
.su-post-meta {
    display: none;
}

/* 
    END: su- shortcode plugin related CSS
*/


/* 
    START: MapGeo Section
*/
/* 插件中的live filter z-index 设置为 999，会悬浮在 header 的上面，这里给纠正回来，设置为 0 */
ul.igm-live-filter {
	z-index: 0 !important;
}
/* 配合国家 MapGeo 地图上城市的 lightbox，给 ul li添加样式, 带有 .twj-tag-list 的类除外 */
/* Resetting default list styles for ul and li within the specified path */
.glightbox-container.glightbox-clean .gcontainer .gslider .ginner-container .igm-map-content.ginlined-content > ul:not(.twj-tag-list) {
    list-style: none;
    padding: 0;
    margin: 0;
}

.glightbox-container.glightbox-clean .gcontainer .gslider .ginner-container .igm-map-content.ginlined-content > ul:not(.twj-tag-list) > li {
    padding: 5px 10px; /* Adjusting padding */
    margin: 10px 0;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glightbox-container.glightbox-clean .gcontainer .gslider .ginner-container .igm-map-content.ginlined-content > ul:not(.twj-tag-list) > li:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.glightbox-container.glightbox-clean .gcontainer .gslider .ginner-container .igm-map-content.ginlined-content > ul:not(.twj-tag-list) > li::before {
    content: '○';
    display: inline-block;
    margin-right: 5px;
    color: #FF8C42;
    vertical-align: middle;
}

/* Nested list styles */
.glightbox-container.glightbox-clean .gcontainer .gslider .ginner-container .igm-map-content.ginlined-content ul:not(.twj-tag-list) ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 15px; /* Adjust padding for nested ul */
}

.glightbox-container.glightbox-clean .gcontainer .gslider .ginner-container .igm-map-content.ginlined-content ul:not(.twj-tag-list) ul > li {
    margin: 5px 0;
}

.glightbox-container.glightbox-clean .gcontainer .gslider .ginner-container .igm-map-content.ginlined-content ul:not(.twj-tag-list) ul > li::before {
    content: '•';
    display: inline-block;
    margin-right: 5px;
    color: #FF8C42;
    font-size: 18px;
}

/* Interactive Geo Map External List Style */
/* Reset default list styles */
.igm_entries_list ul,
.igm_entries_list ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style for unordered list */
.igm_entries_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
}

/* Style for list items */
.igm_entries_list li {
  flex: 0 0 calc(30% - 10px); /* Adjust the width as needed */
  margin: 0 5px; /* Add margin to create space between items */
  padding: 6px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, background-color 0.3s ease; /* Add transition for shadow and background color */
  position: relative;
  display: inline-block; /* Display list items inline */
}

/* Hover effect on list items */
.igm_entries_list li:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow on hover */
  background-color: #f0f0f0;
}

/* Nested list styling */
.igm_entries_list ul ul {
  margin-top: 8px;
  margin-left: 20px;
}

/* Add some colors and styles to the text */
.igm_entries_list a {
  text-decoration: none;
  color: #333333;
  font-weight: bold;
  transition: color 0.3s ease; /* Add transition for text color */
}

/* Change color on hover for links */
.igm_entries_list a:hover {
  color: #007bff;
}

/* 给 GeoMap vector icon 加入白色的边框 */
.imapsMapImage .imapsSprite { stroke:#FFF; stroke-width:0.5; }

/* 
    END: MapGeo Section 
*/


/* 
    START: Google (My) Map Section
*/

/* Google Map Info Section */
.google-map-info-section {
    margin-top: 20px;
    margin-bottom: 20px;
    --module-font-size: 15px;
    --module-icon-color: #4A90E2;
    --module-bg-color: rgba(168,231,255,0.33);
    --module-padding: 12px 16px;
}

/* 
    END: Google (My) Map Section
*/


/* 
    START: Theme Related CSS Section
*/

/* CSS for breadcrumb */
@media (max-width: 768px) { /* breadcrumb */
    .breadcrumb {
        margin-bottom: 10px;
    }

    .mobile-only {
        display: block; /* or 'flex', 'inline-block', etc., depending on your layout needs */
    }
}

/* 主题默认页面向下调整的空间 64px太大了，这里往回调整 20px */
body.header-fixed #wrap {
	padding-top: 44px;
}
/* 对于小屏幕设备，主题默认页面向下调整的空间 64px太大了，这里往回调整 40px */
@media (max-width: 767px) {
    body.home.header-fixed #wrap {
        padding-top: 24px;
    }
}

/* 对于 .archive.category 来说，面包屑导航主题默认 margin-top: -20px; 这里纠正回来 */
.archive.category .breadcrumb {
    margin-top: 0px;
}

/* 导航菜单放大字体 styles */
body>header.header .nav, .login.cur, .collapse.navbar-collapse, .navbar-action .profile .menu-item-name, .navbar-action .profile .menu-item-avatar,.navbar-action a.wpcom-btn.publish {
    font-weight: bold;
    font-size: 16px;
}

/* 
    END: Theme Related CSS Section
*/


/* 
    START: TWJ Customized CSS Section
*/

/* 不显示文章发布时间 */
.entry-info .entry-date.published,
.entry-info .entry-date.published + .dot {
    display: none;
}

/* 设置 country和city 页面的 title 样式 */
.custom-page-title {
    color: #FF8C42;
    font-weight: bold;
    font-size: 16px; /* Smaller font size for mobile devices */
}
@media (min-width: 768px) { /* Larger screens (e.g., tablets and desktops) */
    .custom-page-title {
        font-size: 24px; /* Larger font size for desktops */
    }
}

/* 和主题相同的 panel head title 添加额外样式 */
.twj-panel-head {
    margin-bottom: 15px;
}


/* twj独特的动态添加tags的样式 */
.twj-tag-list {
    padding: 0;
    list-style: none;
}
.twj-tag-item {
    display: inline-block;
    background: linear-gradient(145deg, #FF8C42, #FF7024);
    margin: 3px;
    padding: 4px 12px;
    border-radius: 12px;
    color: white;
    font-size: 12px;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.twj-tag-item:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #FF7024, #FF8C42);
    box-shadow: 0 3px 5px rgba(0,0,0,0.15);
}

/** 如果用户没有登陆, disable “导入 Google Map” button */
.custom-import-button {
    position: relative; 
}
.custom-import-button.disabled {
    opacity: 1 !important; 
    background-color: #ccc; 
    pointer-events: none; 
    cursor: not-allowed; 
}
.custom-tooltip { /* TODO: tooltip need further test */
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
    z-index: 10;
    display: none; 
    white-space: nowrap; 
}

/* 让标题居中并设置颜色 */
.twj-customized-title {
    text-align: center;
    color: #2C3E50;
}

/* 在不同设备上的响应式标题样式 */
@media (max-width: 768px) {
    .twj-customized-title {
        font-size: 24px; /* 根据需要调整手机端的字体大小 */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .twj-customized-title {
        font-size: 28px; /* 根据需要调整平板端的字体大小 */
    }
}

/* 
    END: TWJ Customized CSS Section
*/


/* 
    START: CSS for Site General
*/

.hide-me {
	display: none;
}

/* CSS for Desktop devices */
.desktop-only {
    display: block; /* or 'flex', 'inline-block', etc., depending on your layout needs */
}

.mobile-only {
    display: none;
}

/* CSS for Mobile devices */
@media (max-width: 768px) { /* Adjust the max-width as needed for your breakpoint */
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block; /* or 'flex', 'inline-block', etc., depending on your layout needs */
    }
}
/* 默认情况文章移动端无法编辑，隐藏了编辑按钮，这里改为显示编辑按钮，让移动端也可以编辑 */
@media (max-width: 767px) {
    .wpcom-profile-main .profile-posts-list .item .edit-link {
        display: block !important;
    }
}

/* margin style*/
.margin-0 {
	margin: 0;
}
.margin-left-0 {
    margin-left: 0;
}
.margin-right-0 {
    margin-right: 0;
}
.margin-top-0 {
    margin-top: 0;
}
.margin-bottom-0 {
    margin-bottom: 0;
}
.margin-left-5 {
    margin-left: 5px;
}
.margin-right-5 {
    margin-right: 5px;
}
.margin-top-5 {
    margin-top: 5px;
}
.margin-bottom-5 {
    margin-bottom: 5px;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-right-10 {
    margin-right: 10px;
}
.margin-top-10 {
    margin-top: 10px;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}
.margin-left-15 {
    margin-left: 15px;
}
.margin-right-15 {
    margin-right: 15px;
}
.margin-top-15 {
    margin-top: 15px;
}
.margin-bottom-15 {
    margin-bottom: 15px;
}
.margin-left-20 {
    margin-left: 20px;
}
.margin-right-20 {
    margin-right: 20px;
}
.margin-top-20 {
    margin-top: 20px;
}
.margin-bottom-20 {
    margin-bottom: 20px;
}

/* padding style*/
.padding-0 {
	padding: 0;
}
.padding-5 {
	padding: 5px;
}
.padding-10 {
	padding: 10px;
}
.padding-left-0 {
    padding-left: 0;
}
.padding-right-0 {
    padding-right: 0;
}
.padding-top-0 {
    padding-top: 0;
}
.padding-bottom-0 {
    padding-bottom: 0;
}
.padding-left-5 {
    padding-left: 5px;
}
.padding-right-5 {
    padding-right: 5px;
}
.padding-top-5 {
    padding-top: 5px;
}
.padding-bottom-5 {
    padding-bottom: 5px;
}
.padding-left-10 {
    padding-left: 10px;
}
.padding-right-10 {
    padding-right: 10px;
}
.padding-top-10 {
    padding-top: 10px;
}
.padding-bottom-10 {
    padding-bottom: 10px;
}
.padding-left-15 {
    padding-left: 15px;
}
.padding-right-15 {
    padding-right: 15px;
}
.padding-top-15 {
    padding-top: 15px;
}
.padding-bottom-15 {
    padding-bottom: 15px;
}
.padding-left-20 {
    padding-left: 20px;
}
.padding-right-20 {
    padding-right: 20px;
}
.padding-top-20 {
    padding-top: 20px;
}
.padding-bottom-20 {
    padding-bottom: 20px;
}

/* 
    END: CSS for Site General
*/