/* Breeze HVN Social 2.3.0 — root desktop layout reset
   Loaded directly after every phpBB/extension stylesheet. */

@media (min-width: 1100px) {
  html body #wrap.wrap {
    width: 96vw !important;
    max-width: 1720px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px 0 34px !important;
    box-sizing: border-box !important;
  }

  html body #page-header,
  html body #page-header .headerbar,
  html body #page-header .navbar,
  html body .hvn-social-layout {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body #page-header .headerbar {
    min-height: 220px !important;
    border-radius: 18px !important;
  }
  html body #page-header .headerbar .inner {
    min-height: 220px !important;
  }

  html body #page-header .navbar {
    margin-top: 12px !important;
    margin-bottom: 18px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }

  html body .hvn-social-layout {
    display: grid !important;
    grid-template-columns: 205px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }

  html body .hvn-social-rail {
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
  }
  html body .hvn-social-rail > a {
    min-height: 48px !important;
    padding: 0 13px !important;
    gap: 11px !important;
    font-size: 15px !important;
    border-radius: 11px !important;
  }
  html body .hvn-social-rail > a .icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }

  html body .hvn-social-layout > #page-body.page-body,
  html body #page-body.page-body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body #page-body > *,
  html body #page-body .forabg,
  html body #page-body .forumbg,
  html body #page-body .panel,
  html body #page-body .stats,
  html body #page-body .stats-header,
  html body #page-body .post,
  html body #page-body .action-bar,
  html body #page-body .hvn-topic-tools-card,
  html body #page-body .hvn-games-frame {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  html body .hvn-games-frame {
    height: 176px !important;
  }

  html body .forabg,
  html body .forumbg,
  html body .panel,
  html body .stats,
  html body .stats-header,
  html body .post {
    border-radius: 15px !important;
  }

  /* Topic posts: stable two-column grid, scaled with the wider canvas. */
  html body .post > .inner {
    display: grid !important;
    grid-template-columns: 265px minmax(0, 1fr) !important;
    column-gap: 28px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
  }
  html body .postprofile {
    width: 265px !important;
    min-width: 0 !important;
    max-width: 265px !important;
    margin: 0 !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }
  html body .postbody,
  html body .has-profile .postbody {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Readability: scale typography and breathing room together. */
  html body {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
  html body .postbody h3 {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
  }
  html body .postbody .author {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  html body .post .content {
    font-size: 18.5px !important;
    line-height: 1.86 !important;
    letter-spacing: .005em !important;
    word-spacing: .018em !important;
  }
  html body .post .content p {
    margin: 0 0 1.08em !important;
  }
  html body .postprofile .username,
  html body .postprofile .username-coloured,
  html body .postprofile .hvn-profile-name,
  html body .postprofile .hvn-profile-name a {
    font-size: 17px !important;
    line-height: 1.38 !important;
  }
  html body .postprofile dd,
  html body .postprofile .profile-posts,
  html body .postprofile .profile-joined,
  html body .postprofile .profile-custom-field {
    font-size: 13px !important;
    line-height: 1.62 !important;
  }
  html body a.forumtitle,
  html body a.topictitle {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }
  html body .forums .list-inner,
  html body .topics .list-inner,
  html body .stat-block,
  html body .stats {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  /* Slightly larger controls so they no longer look lost in the wider canvas. */
  html body .hvn-post-action,
  html body .post-buttons .button {
    min-height: 33px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  html body .hvn-reaction-row {
    width: min(100%, 560px) !important;
    gap: 8px !important;
  }
  html body .hvn-reaction-btn {
    min-height: 37px !important;
    height: 37px !important;
    font-size: 12.5px !important;
  }
}

@media (min-width: 1400px) {
  html body #wrap.wrap {
    width: calc(100vw - 40px) !important;
  }
  html body .hvn-social-layout {
    grid-template-columns: 215px minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  html body .hvn-social-rail {
    width: 215px !important;
    max-width: 215px !important;
    min-width: 215px !important;
  }
}

/* Preserve the existing mobile/tablet behaviour. */
@media (max-width: 1099px) {
  html body #wrap.wrap {
    max-width: none !important;
  }
}


/* HVN Social 2.4.1 — slightly narrower desktop canvas */
@media (min-width: 1100px) {
  html body #wrap.wrap {
    width: min(94vw, 1520px) !important;
    max-width: 1520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ======================================================================
   Breeze HVN Social 2.4.31
   Desktop + laptop unified centered canvas with side corridors.
   Mobile <=700px intentionally untouched.
   ====================================================================== */

/* One desktop/laptop visual system from 701px upward.
   Do not use transform/zoom; keep text and click geometry native. */
@media (min-width:701px){

  html body .wrap{
    box-sizing:border-box!important;
    width:calc(100% - 80px)!important;
    max-width:1360px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* Keep the main forum canvas aligned with the centered wrapper. */
  html body #page-body,
  html body .page-body,
  html body .hvn-social-layout,
  html body .hvn-social-main{
    min-width:0!important;
    max-width:none!important;
  }

  /* Laptop and desktop now share the same base typography and rhythm. */
  html body{
    font-size:13.5px!important;
  }

  html body .navbar{
    font-size:13.5px!important;
  }

  html body a.forumtitle,
  html body a.topictitle{
    font-size:14.5px!important;
    line-height:1.4!important;
  }

  html body .row .list-inner{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  html body .forabg,
  html body .forumbg,
  html body .panel,
  html body .post{
    margin-bottom:9px!important;
  }

  html body .button,
  html body input.button1,
  html body input.button2,
  html body a.button1,
  html body a.button2{
    font-size:12.5px!important;
  }

  html body .postbody h3{
    font-size:18.5px!important;
  }

  html body .post .content{
    font-size:16.2px!important;
    line-height:1.72!important;
  }
}

/* Laptop: keep the SAME visual language as desktop.
   Only the corridor width is reduced so the forum does not become cramped. */
@media (min-width:701px) and (max-width:1439px){

  html body .wrap{
    width:calc(100% - 48px)!important;
    max-width:1320px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  /* Cancel older laptop-only shrinking overrides. */
  html body{
    font-size:13.5px!important;
  }

  html body .navbar{
    font-size:13.5px!important;
  }

  html body a.forumtitle,
  html body a.topictitle{
    font-size:14.5px!important;
  }

  html body .button,
  html body input.button1,
  html body input.button2,
  html body a.button1,
  html body a.button2{
    font-size:12.5px!important;
  }

  html body .postbody h3{
    font-size:18.5px!important;
  }

  html body .post .content{
    font-size:16.2px!important;
    line-height:1.72!important;
  }
}

/* Large desktop: wider side corridors for future floating utilities/widgets. */
@media (min-width:1440px){

  html body .wrap{
    width:calc(100% - 120px)!important;
    max-width:1360px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* ======================================================================
   Breeze HVN Social 2.4.32
   REAL desktop/laptop compact canvas fix.
   Root cause: older rules target #wrap.wrap (ID specificity), while 2.4.31
   targeted only .wrap. Use the exact stronger selector here.
   Mobile <=700px remains completely untouched.
   ====================================================================== */
@media (min-width:701px){

  html body #wrap.wrap{
    box-sizing:border-box!important;
    width:min(calc(100vw - 72px),1280px)!important;
    max-width:1280px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  /* Keep all major forum regions aligned inside the centered canvas. */
  html body #page-header,
  html body #page-body,
  html body #page-footer,
  html body .hvn-social-layout{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* Laptop uses exactly the same centered design language.
   It simply keeps a practical minimum corridor on each side. */
@media (min-width:701px) and (max-width:1439px){
  html body #wrap.wrap{
    width:min(calc(100vw - 48px),1280px)!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }
}

/* Large desktop deliberately leaves broad side corridors for future widgets. */
@media (min-width:1440px){
  html body #wrap.wrap{
    width:1280px!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}