/**
 * Softly — definitive header + shell layout (loads LAST)
 * Kills float wars from pesktop.css / bridge that break desktop + dark mode.
 */

/* ========== Desktop header: one clean flex row ========== */
.header {
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: var(--bg-header, #1e293b) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  position: sticky !important;
  top: 0;
  z-index: 1000;
}

body.admin-bar .header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }
}

.header .uk-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  height: 60px !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  float: none !important;
}

.header .logo,
#ltr .header .logo,
.header .search,
#ltr .header .search,
.header .header_2,
#ltr .header .header_2 {
  float: none !important;
  margin: 0 !important;
}

.header .logo {
  order: 1;
  flex: 0 0 auto;
  line-height: 0;
}

.header .logo img {
  width: 44px !important;
  height: 44px !important;
  display: block;
}

.header .search {
  order: 2;
  flex: 1 1 auto;
  max-width: 420px;
  min-width: 160px;
  position: relative !important;
}

.header .search form,
.header .search .uk-search {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  position: relative !important;
}

.header .search input,
.header .search .uk-search-input {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 100% !important;
  height: 40px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  background: #fff !important;
  border: 1px solid transparent !important;
  color: #0f172a !important;
  padding-inline-end: 42px !important;
}

body.darkmode .header .search input,
body.darkmode .header .search .uk-search-input {
  background: #222632 !important;
  border-color: #2c3140 !important;
  color: #e8eaef !important;
}

.header .search .uk-search-icon-flip,
.header .search span.uk-search-icon-flip {
  position: absolute !important;
  inset-inline-end: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  height: 28px !important;
  width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
  background: var(--primary, #3b82f6) !important;
  color: #fff !important;
  z-index: 2 !important;
  float: none !important;
}

.header #serach_ico,
.header #menu_ico,
.header .softly-menu-toggle {
  display: none !important;
}

.header .softly-dark-btn {
  display: none; /* shown in media queries */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e2e8f0;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1;
}
.header .softly-dark-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.header .softly-dark-btn i {
  color: inherit !important;
}

.header .header_2 {
  order: 4;
  flex: 0 0 auto;
  margin-inline-start: 0 !important;
}

.header .header_2 ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

.header .header_2 ul > li,
.header .header_2 .softly-nav-platform {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  list-style: none !important;
}

.header .header_2 .softly-mobile-label {
  display: none !important;
}

.header .header_2 a.hover-nav,
.header .header_2 .softly-nav-platform a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.header .header_2 a.hover-nav:hover,
.header .header_2 .softly-nav-platform a:hover {
  color: #fff !important;
  opacity: 1 !important;
}

.header .header_2 i,
.header .header_2 .fas,
.header .header_2 .fab {
  font-size: 1.25rem !important;
  color: #e2e8f0 !important;
  line-height: 1 !important;
}

.header .header_2 .uk-button-text {
  color: #e2e8f0 !important;
  padding: 0 !important;
}

#result2 {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1100;
  max-height: 360px;
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

#result2:empty {
  display: none !important;
}

#result2:not(:empty),
#result2.is-open {
  display: block !important;
}

body.darkmode #result2 {
  background: #1a1d27;
  border: 1px solid #2c3140;
}

/* ========== Mobile header ========== */
@media (max-width: 960px) {
  .header .uk-container {
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .header .search {
    display: none !important;
  }

  .header .logo {
    order: 1 !important;
    margin: 0 auto 0 0 !important;
  }

  .header #menu_ico,
  .header .softly-menu-toggle {
    display: inline-flex !important;
    order: 2 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .softly-menu-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .softly-menu-toggle.is-open .softly-menu-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .softly-menu-toggle.is-open .softly-menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }
  .softly-menu-toggle.is-open .softly-menu-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .header .softly-dark-btn {
    order: 3 !important;
    display: inline-flex !important;
  }

  .header .softly-dark-inline {
    display: none !important;
  }

  .header #serach_ico,
  .header .softly-search-toggle {
    display: inline-flex !important;
    order: 4 !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e2e8f0 !important;
    border-radius: 8px;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 1.1rem;
  }

  .header #serach_ico .fa-search,
  .header .softly-search-toggle .fa-search {
    color: #e2e8f0 !important;
  }

  /* Hide desktop-only nav on mobile */
  .header #softly-desktop-nav,
  .header .softly-desktop-only {
    display: none !important;
  }

  /* Compact platform menu panel */
  .header #softly-mobile-nav.header_2.hidfrom {
    display: none !important;
    visibility: hidden !important;
  }

  body.softly-menu-open .header #softly-mobile-nav,
  .header #softly-mobile-nav.is-open {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 68px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 10050 !important;
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
    padding: 6px 0 !important;
    max-height: min(50vh, 320px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
  }

  body.admin-bar.softly-menu-open .header #softly-mobile-nav,
  body.admin-bar .header #softly-mobile-nav.is-open {
    top: 100px !important;
  }

  .header #softly-mobile-nav.is-open ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header #softly-mobile-nav.is-open ul > li,
  .header #softly-mobile-nav.is-open .softly-nav-platform {
    width: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .header #softly-mobile-nav.is-open .softly-nav-platform a {
    width: 100%;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    color: #e2e8f0 !important;
    text-decoration: none !important;
    font-size: 0.95rem;
  }

  .header #softly-mobile-nav.is-open .softly-mobile-label {
    display: inline !important;
  }

  .bluer.is-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10040 !important;
    background: rgba(15, 23, 42, 0.45) !important;
  }
}

/* Desktop */
@media (min-width: 961px) {
  .header .softly-dark-btn {
    order: 3;
    display: inline-flex !important;
    margin-inline-start: auto !important;
  }

  .header .softly-dark-inline {
    display: none !important;
  }

  .header #softly-desktop-nav,
  .header .softly-desktop-only {
    order: 4;
    display: block !important;
    visibility: visible !important;
    flex: 0 0 auto;
  }

  .header #serach_ico,
  .header .softly-search-toggle,
  .header #menu_ico,
  .header .softly-menu-toggle,
  .header #softly-mobile-nav {
    display: none !important;
  }
}

/* ========== Mobile search modal (fixed) ========== */
#ser.softly-search-modal .softly-search-dialog,
#ser .softly-search-dialog {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  padding: 56px 16px 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#ser .uk-modal-close-default {
  color: #e2e8f0 !important;
  top: 14px !important;
  right: 14px !important;
}

.softly-search-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}

.softly-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 0 14px;
  height: 48px;
}

.softly-search-field i {
  color: #94a3b8;
  flex: 0 0 auto;
}

.softly-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  background: transparent !important;
  color: #f8fafc !important;
  font-size: 1rem !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.softly-search-submit {
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: #3b82f6;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

#result4 {
  max-width: 640px;
  margin: 12px auto 0;
  max-height: 50vh;
  overflow: auto;
}

#result4:empty {
  display: none !important;
}

#result4:not(:empty),
#result4.is-open {
  display: block !important;
  background: #1e293b;
  border-radius: 10px;
  border: 1px solid #334155;
}

#result4 .result-aerch {
  color: #e2e8f0 !important;
  padding: 10px 12px;
}

/* ========== Mobile layout: posts FIRST, sidebar AFTER ========== */
@media (max-width: 960px) {
  .sec2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .programs_s,
  #ltr .programs_s,
  body.search .programs_s,
  body.search-results .programs_s,
  body.archive .programs_s {
    order: 1 !important;
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
  }

  .tags_side,
  #ltr .tags_side,
  body.search .tags_side,
  body.search-results .tags_side,
  body.archive .tags_side {
    order: 2 !important;
    width: 100% !important;
    float: none !important;
    padding: 12px 0 0 !important;
  }

  /* Primary Category / filter checkboxes alignment */
  .listly_filter .filter-option,
  .tags_body .filter-option,
  .widget_listly_filter label,
  .listly_filter label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
  }

  .listly_filter input[type="checkbox"],
  .tags_body input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex: 0 0 auto;
    accent-color: #3b82f6;
  }
}

/* ========== Mobile cards — force PeskTop horizontal row ========== */
@media (max-width: 960px) {
  .programs_s,
  #ltr .programs_s,
  body.search .programs_s,
  body.search-results .programs_s,
  body.archive .programs_s {
    order: 1 !important;
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
  }

  .tags_side,
  #ltr .tags_side,
  body.search .tags_side,
  body.search-results .tags_side {
    order: 2 !important;
    width: 100% !important;
    float: none !important;
    padding: 12px 0 0 !important;
  }

  .sec2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .programs_s > a,
  .programs_s a:has(.program-x5),
  .programs_s a:has(.program-main_v2),
  .gird3 > a,
  .gird_v > a {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  .program-x5,
  .gird3.program-x5 {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .program-main_v2,
  .gird3 .program-main_v2,
  .programs_s .program-main_v2 {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 52px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "icon title meta"
      "icon tag   meta" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    padding: 12px !important;
    min-height: 88px !important;
    height: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .program-main_v2 .program_img_v2,
  .gird3 .program-main_v2 .program_img_v2 {
    grid-area: icon !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    float: none !important;
    padding: 0 !important;
    text-align: left !important;
    flex: none !important;
  }

  .program-main_v2 .program_img_v2 img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  .program-main_v2 .x1 {
    grid-area: title !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    flex: none !important;
    min-width: 0 !important;
  }

  .program-main_v2 .program_name_v2 .text-name {
    font-size: 0.92rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .program-main_v2 .dec-short {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    margin: 2px 0 0 !important;
  }

  .program-main_v2 .program_tag_v2,
  .program-main_v2 .program_tag.new_time {
    grid-area: tag !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    width: fit-content !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
  }

  .program-main_v2 .x2 {
    grid-area: meta !important;
    grid-row: 1 / span 2 !important;
    width: auto !important;
    max-width: 52px !important;
    float: none !important;
    border: 0 !important;
    border-inline-start: 1px solid #e8eaef !important;
    padding: 0 0 0 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    align-self: stretch !important;
  }

  .program-main_v2 .x3 {
    display: none !important; /* size shown on desktop; keep mobile clean like PeskTop */
  }

  body.darkmode .program-main_v2 .x2 {
    border-inline-start-color: #2c3140 !important;
  }

  /* Search / archive headline + pagination stay usable */
  .section-headline-wrap .section-headline-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .section-headline-wrap h1 {
    font-size: 1.35rem !important;
    margin: 0 !important;
  }

  .programs_s .pagination,
  nav.pagination,
  .pagination {
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .programs_s .pagination a,
  .programs_s .pagination span,
  .pagination .page-numbers {
    min-width: 34px !important;
    height: 34px !important;
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }
}


/* ========== Dark mode surfaces (readable, not muddy / not blinding) ========== */
body.darkmode {
  background: #12141a !important;
  color: #d6dae3 !important;
}

body.darkmode .content {
  background: #12141a !important;
}

body.darkmode .section-headline-wrap {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2c3140 !important;
}

body.darkmode .section-headline-wrap h1,
body.darkmode .section-headline-wrap .uk-breadcrumb a {
  color: #e8eaef !important;
  font-family: inherit !important;
}

body.darkmode .program-main_v2,
body.darkmode .tags_body,
body.darkmode .tags_body .widget-wrapper,
body.darkmode .tags_body .widget,
body.darkmode .program_deatils_v2,
body.darkmode .comments_v2,
body.darkmode .slider_v2,
body.darkmode .dectaion,
body.darkmode .section_label_v2 {
  background: #1a1d27 !important;
  border: 1px solid #2c3140 !important;
  color: #c9cfda !important;
  box-shadow: none !important;
}

body.darkmode .program-main_v2:hover {
  border-color: #3d4558 !important;
  background: #1e2230 !important;
}

body.darkmode .text-name,
body.darkmode .program-main_v2 a .text-name {
  color: #f1f5f9 !important;
}

body.darkmode .dec-short,
body.darkmode p {
  color: #9aa3b2 !important;
}

body.darkmode .uk-pagination > li > a,
body.darkmode .uk-pagination > li > span {
  background: #1a1d27 !important;
  border: 1px solid #2c3140 !important;
  color: #c9cfda !important;
}

body.darkmode .footer {
  background: #0e1016 !important;
}

/* Soften logged-in admin bar clutter — full reset is in softly-admin-bar.css */
body:not(.admin-bar) #wpadminbar {
  display: none !important;
}