/* Stories blog on the main-site dark theme. Loaded after the theme by mu-plugins/almurooj-stories-design.php */

:root {
  --bg-clr: #0b1220;
  --bg-clr-light: #0b1220;
  --clr-text: #cfd8e3;
  --border-clr: rgba(255, 255, 255, 0.12);
  --toggle-btn: #ffffff;
  --primary-color: #01B6FF;
  --site-title-color: #ffffff;
  --cat-color: #01B6FF;
  --am-card: #0f172a;
  --am-grad: linear-gradient(90deg, #FB33EB, #01B6FF);
}

html,
body,
#page,
.site,
.odyssey-blog-main-wrapper {
  background: #0b1220 !important;
  color: #cfd8e3;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  color: #fff;
}

a { color: #01B6FF; }
a:hover, a:focus-visible { color: #fff; }

/* Loader */
#loader { background: #0b1220 !important; }

/* Header */
.site-header,
.odyssey-blog-navigation,
.navigation-outer-wrapper {
  background: rgba(11, 11, 35, 0.98) !important;
  border-bottom: 0;
}
.site-header { position: relative; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #FB33EB, #7a5cff 50%, #01B6FF);
}
.main-navigation a,
.header-search-wrap .search-icon,
.header-search-wrap .search-icon i { color: #dfe3f5 !important; }
.main-navigation a:hover,
.main-navigation a:focus-visible { color: #fff !important; }
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: #01B6FF !important;
  font-weight: 600;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: inset 0 -2px 0 #01B6FF;
  border-radius: 0 !important;
}
.main-navigation ul ul { background: #13143a !important; border: 1px solid rgba(255, 255, 255, 0.08); }
.main-navigation ul ul a { color: #cfd4ec !important; }
.menu-toggle .ham-icon { background: #fff !important; }
.header-search-form { background: #13143a !important; border: 1px solid rgba(255, 255, 255, 0.12); }

/* Search forms (sidebar widget, header dropdown, no-results page) */
.wp-block-search__label,
.search-form label { color: #fff; font-weight: 600; }
.wp-block-search__inside-wrapper { gap: 10px; border: 0 !important; padding: 0 !important; }
.wp-block-search__input,
.search-field,
input[type="search"] {
  width: 100%;
  background: #101a30 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 16px;
}
.wp-block-search__input::placeholder,
.search-field::placeholder { color: #93a0b4; }
.wp-block-search__input:focus,
.search-field:focus { outline: none; border-color: #01B6FF !important; }
.wp-block-search__button,
.search-submit {
  background: var(--am-grad) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 12px 26px !important;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.wp-block-search__button:hover,
.search-submit:hover { box-shadow: 0 8px 22px rgba(1, 182, 255, 0.35); }

/* Listing pages: full-width grid with the widgets arranged around it */
body.blog .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper,
body.archive .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper,
body.search .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  align-items: start;
}
body.blog .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper #primary,
body.archive .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper #primary,
body.search .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper #primary {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  flex: none;
}
body.blog .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper #secondary,
body.archive .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper #secondary,
body.search .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper #secondary {
  display: contents;
}
body.blog #secondary .widget,
body.archive #secondary .widget,
body.search #secondary .widget {
  grid-row: 3;
  min-width: 0;
  margin: 0;
  padding: 24px;
  background: var(--am-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
body.blog #secondary .widget_search,
body.archive #secondary .widget_search,
body.search #secondary .widget_search {
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Card grid */
.blog-archive-layout.archive-grid-layout,
.blog-archive-layout.archive-grid-layout.column-2,
.blog-archive-layout.archive-grid-layout.column-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.blog-archive-layout.archive-grid-layout.am-masonry {
  row-gap: 0 !important;
  grid-auto-rows: 1px;
  align-items: start;
}
.blog-archive-layout.archive-grid-layout article { margin: 0; min-width: 0; }
.blog-archive-layout.archive-grid-layout article .blog-post-container {
  height: auto;
  overflow: hidden;
  background: var(--am-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.blog-archive-layout.archive-grid-layout article .blog-post-container:hover {
  transform: translateY(-4px);
  border-color: rgba(1, 182, 255, 0.45);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}
.blog-archive-layout.archive-grid-layout article .blog-post-container .blog-post-inner { display: block; height: auto; }
.blog-archive-layout.archive-grid-layout article .blog-post-container .blog-post-inner .blog-post-image {
  display: block;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  line-height: normal;
}
.blog-archive-layout.archive-grid-layout article .blog-post-container .blog-post-inner .blog-post-image .post-thumbnail {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  line-height: 0;
}
.blog-archive-layout.archive-grid-layout article .blog-post-container .blog-post-inner .blog-post-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}
/* Category label moves out of the image into the card content */
.blog-archive-layout.archive-grid-layout article .blog-post-container .blog-post-inner .blog-post-image .post-categories {
  position: static;
  padding: 16px 20px 0;
  line-height: 1.4;
}
.post-categories a,
.cat-links a {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(1, 182, 255, 0.14) !important;
  color: #01B6FF !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.post-categories a::before,
.post-categories a::after,
.cat-links a::before,
.cat-links a::after { display: none !important; }
.post-categories a:hover,
.cat-links a:hover { background: #01B6FF !important; color: #06101f !important; }
.blog-archive-layout.archive-grid-layout article .blog-post-container .blog-post-inner .blog-post-detail {
  margin: 0;
  padding: 12px 20px 22px;
}
.blog-post-detail .entry-title { margin: 0 0 12px; font-size: 20px; line-height: 1.35; }
.blog-post-detail .entry-title a { color: #fff !important; text-decoration: none; }
.blog-post-detail .entry-title a:hover,
.blog-post-detail .entry-title a:focus-visible { color: #01B6FF !important; }
.post-meta,
.post-meta a,
.post-meta span,
.post-meta i { color: #93a0b4 !important; }
.post-excerpt p { margin: 12px 0 0; color: #cfd8e3; font-size: 15px; line-height: 1.65; }

/* Pagination */
.pagination .nav-links a,
.pagination .nav-links .dots {
  background: var(--am-card) !important;
  color: #dfe3f5 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.pagination .nav-links a:hover,
.pagination .nav-links a:focus-visible,
.pagination .nav-links .current {
  background: var(--am-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Widgets */
#secondary .widget a { color: #cfd8e3; text-decoration: none; }
#secondary .widget a:hover,
#secondary .widget a:focus-visible { color: #01B6FF; }
#secondary .widget h2 { margin: 0 0 14px; font-size: 20px; }
#secondary .widget ul,
#secondary .widget ol { margin: 0; padding: 0; list-style: none; }
#secondary .widget li { margin: 0 0 10px; line-height: 1.5; }
#secondary .wp-block-latest-comments__comment-meta { color: #93a0b4; }
#secondary .wp-block-categories-list { display: flex; flex-wrap: wrap; gap: 8px; }
#secondary .wp-block-categories-list li { margin: 0; }
#secondary .wp-block-categories-list a {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 14px;
}
#secondary .wp-block-categories-list a:hover { border-color: #01B6FF; }

/* Single posts and pages */
.single .site-main,
.page .site-main,
.entry-content,
.entry-content p,
.entry-content li,
.page-content,
.page-content p,
.comments-area,
.comment-content p { color: #d7deea; }
.post-main-title,
.page-title,
.entry-title,
.comments-title,
.comment-reply-title { color: #fff; }
.entry-content a,
.page-content a { color: #01B6FF; text-decoration: underline; }
.entry-content blockquote { border-color: #01B6FF; background: #0f172a; color: #dfe3f5; }
.entry-content table,
.entry-content th,
.entry-content td { border-color: rgba(255, 255, 255, 0.16); }
.entry-content th { background: #0f172a; color: #fff; }
.single #secondary .widget,
.page #secondary .widget {
  padding: 22px;
  margin-bottom: 24px;
  background: var(--am-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
  background: #101a30 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.breadcrumbs, .breadcrumbs a, .trail-items, .trail-items a, .trail-items li,
.site-main .entry-meta, .site-main .entry-meta a, .site-main .entry-meta i,
.site-main .entry-meta span { color: #a8b3c7 !important; }

/* Tablet */
@media (max-width: 991px) {
  .blog-archive-layout.archive-grid-layout,
  .blog-archive-layout.archive-grid-layout.column-2,
  .blog-archive-layout.archive-grid-layout.column-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  body.blog .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper,
  body.archive .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper,
  body.search .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.blog #secondary .widget,
  body.archive #secondary .widget,
  body.search #secondary .widget { grid-row: 3; }
  body.blog #secondary .widget_search,
  body.archive #secondary .widget_search,
  body.search #secondary .widget_search { grid-row: 1; }
  body.blog #secondary .widget:last-child,
  body.archive #secondary .widget:last-child,
  body.search #secondary .widget:last-child { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 600px) {
  .blog-archive-layout.archive-grid-layout,
  .blog-archive-layout.archive-grid-layout.column-2,
  .blog-archive-layout.archive-grid-layout.column-3 { grid-template-columns: minmax(0, 1fr); }
  body.blog .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper,
  body.archive .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper,
  body.search .odyssey-blog-main-wrapper .section-wrapper .odyssey-blog-container-wrapper { grid-template-columns: minmax(0, 1fr); }
  body.blog #secondary .widget:not(.widget_search),
  body.archive #secondary .widget:not(.widget_search),
  body.search #secondary .widget:not(.widget_search) { grid-row: auto; }
  .wp-block-search__inside-wrapper { flex-wrap: wrap; }
  .wp-block-search__button { width: 100%; margin-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-archive-layout.archive-grid-layout article .blog-post-container { transition: none; }
}