/* DCLKR_RESPONSIVE_LAYOUT_V2
 * Exactly two index-page layout modes:
 *   1) phone < 768px: keep the current mobile layout untouched
 *   2) >= 768px: use the desktop sidebar layout continuously
 *
 * The forum container grows continuously with the viewport up to 1280px,
 * then stays at 1280px.  The sidebar and gap also interpolate smoothly so
 * the old 992/1100/1600px visual steps disappear.
 */

@media (min-width: 768px) {
  /* Remove Flarum's stepped container widths (tablet/desktop/HD/XL/XXL). */
  .container {
    width: min(1280px, 100%) !important;
    max-width: 1280px !important;
  }

  /* One continuous desktop geometry from 768px through 1280px. */
  .IndexPage {
    --sidebar-width: clamp(190px, calc(85px + 13.671875vw), 260px);
    --gap: clamp(50px, calc(41px + 1.171875vw), 56px);
  }

  /* Flarum normally keeps the side navigation horizontal until 992px.
     Make the desktop two-column structure start immediately at 768px. */
  .IndexPage .sideNavContainer,
  .IndexPage .Page-container {
    display: flex !important;
    gap: var(--gap) !important;
  }

  .IndexPage .sideNav,
  .IndexPage .sideNav > ul,
  .IndexPage .Page-sidebar {
    width: var(--sidebar-width) !important;
  }

  .IndexPage .sideNav,
  .IndexPage .Page-sidebar {
    flex-shrink: 0 !important;
  }

  .IndexPage .sideNavOffset,
  .IndexPage .Page-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .IndexPage .sideNavOffset,
  .IndexPage .Page-content,
  .IndexPage .Page-sidebar {
    margin-top: 30px !important;
  }

  /* Undo only the tablet-only horizontal sideNav mixin. */
  .IndexPage .sideNav {
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }

  .IndexPage .sideNav::after {
    content: none !important;
    display: none !important;
  }

  .IndexPage .sideNav > ul > li,
  .IndexPage .sideNav .Dropdown-menu > li {
    display: block !important;
    margin: 0 0 10px !important;
    vertical-align: top !important;
  }

  .IndexPage .sideNav .Dropdown-separator {
    display: block !important;
  }

  .IndexPage .sideNav .Dropdown--select .Dropdown-menu > li > a,
  .IndexPage .sideNav .Dropdown--select .Dropdown-menu > li > button,
  .IndexPage .sideNav .Dropdown--select .Dropdown-menu > li > span {
    gap: 15px !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
  }

  .IndexPage .sideNav .affix {
    position: fixed !important;
  }

  .IndexPage .sideNav > ul.affix {
    top: var(--header-height) !important;
    margin-top: 30px !important;
  }

  /* Desktop-style new-discussion button from the same 768px breakpoint. */
  .IndexPage-nav .App-primaryControl {
    margin-bottom: 20px !important;
  }

  .IndexPage-nav .App-primaryControl .Button {
    display: flex !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* dcl-external-links.css contains a tablet-only horizontal-nav fix.
     Revert that fix now that 768-991px also uses the vertical sidebar. */
  .IndexPage .sideNav .DclExternalLink {
    width: 100% !important;
    overflow: hidden !important;
  }

  .IndexPage .sideNav .DclExternalLink .Button-label {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .IndexPage .sideNav .DclExternalLink .Button-labelText {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .IndexPage .sideNav .DclExternalLink-arrow {
    position: static !important;
    margin-inline-start: auto !important;
    padding-inline-start: 10px !important;
    flex: 0 0 auto !important;
  }
}

/* DCLKR_DISCUSSION_TAGS_MOBILE_FLOW_BEGIN */
/*
 * Desktop discussion tags:
 * Flarum normally floats tags at the right and reserves 155px from the title.
 * Restore the same normal-flow placement used on mobile so titles get the width.
 */
@media (min-width: 768px) {
  .IndexPage .DiscussionListItem-title {
    margin-right: 0 !important;
  }

  .IndexPage .DiscussionListItem-info > .item-tags {
    position: static !important;
    right: auto !important;
    top: auto !important;
    max-width: none !important;
    margin-right: 4px !important;
    white-space: normal !important;
    overflow: visible !important;
    transition: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    font-size: inherit !important;
  }

  .IndexPage .DiscussionListItem-info > .item-tags:hover {
    max-width: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}
/* DCLKR_DISCUSSION_TAGS_MOBILE_FLOW_END */

/* DCLKR_DISCUSSION_TAG_LIGHT_STYLE_BEGIN */
/*
 * Discussion-list tags only:
 * white page background + original tag color for text/icon.
 */
.IndexPage .DiscussionListItem-info > .item-tags .TagLabel.colored,
.IndexPage .DiscussionListItem-info > .item-tags .TagLabel--colored {
  --tag-color: var(--tag-bg) !important;
  background: var(--body-bg) !important;
  color: var(--tag-bg) !important;
  box-shadow: none !important;
}

.IndexPage .DiscussionListItem-info > .item-tags .TagLabel.colored .TagLabel-text,
.IndexPage .DiscussionListItem-info > .item-tags .TagLabel--colored .TagLabel-text,
.IndexPage .DiscussionListItem-info > .item-tags .TagLabel.colored .TagLabel-icon,
.IndexPage .DiscussionListItem-info > .item-tags .TagLabel--colored .TagLabel-icon {
  color: var(--tag-bg) !important;
}
/* DCLKR_DISCUSSION_TAG_LIGHT_STYLE_END */