/* Open Discussions v0.10.14: ONE shared header and site layout.
   This loads after all other styles for every forum route. Separate page skins
   no longer change the site width, header placement, or logo dimensions. */

/* Reserve a right-hand scrollbar gutter even on short pages, so moving from a
   long discussion to a short account screen never moves the centered layout. */
html { scrollbar-gutter: stable; }

:root {
  --od-site-max: 1370px;
  --od-header-logo-width: 190px;
  --od-header-logo-height: 36px;
  --od-site-side-width: 247px;
  --od-site-side-gap: 24px;
  --od-site-padding: 24px;
}

/* Top bar and main page use IDENTICAL widths and left/right padding. */
body .topbar { box-sizing:border-box; width:100%; height:66px !important; min-height:66px !important; }
body .topbar > .topbar-inner,
body > main.shell {
  box-sizing:border-box !important;
  width:100% !important;
  max-width:var(--od-site-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--od-site-padding) !important;
  padding-right:var(--od-site-padding) !important;
}
body .topbar > .topbar-inner {
  display:grid !important;
  height:65px !important;
  min-height:65px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  grid-template-columns:minmax(0,1fr) minmax(180px,380px) minmax(0,1fr) !important;
  grid-template-rows:65px !important;
  align-items:center !important;
  column-gap:20px !important;
  row-gap:0 !important;
}
body > main.shell {
  display:grid !important;
  grid-template-columns:var(--od-site-side-width) minmax(0,1fr) !important;
  gap:var(--od-site-side-gap) !important;
  padding-top:26px !important;
  padding-bottom:0 !important;
  align-items:start !important;
}
body > main.shell > section.content {
  grid-column:2 !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
body > main.shell > aside.sidebar { box-sizing:border-box !important; max-width:100% !important; }

/* One exact logo box and anchor point on homepage, messages, topics, profile,
   friends, settings, and all public screens. Never rely on each page's .brand. */
body .topbar .topbar-inner > a.brand {
  display:flex !important;
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  align-self:center !important;
  align-items:center !important;
  flex:none !important;
  box-sizing:border-box !important;
  width:var(--od-header-logo-width) !important;
  min-width:0 !important;
  max-width:var(--od-header-logo-width) !important;
  height:var(--od-header-logo-height) !important;
  max-height:var(--od-header-logo-height) !important;
  line-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  transform:none !important;
}
body .topbar .topbar-inner > a.brand > img.brand-logo {
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:0 !important;
  object-fit:contain !important;
  object-position:left center !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
}
body .topbar .topbar-inner > a.brand > .brand-fallback { display:none !important; }
body .topbar .topbar-inner > :is(form.top-search, form.search) {
  display:block !important;
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:stretch !important;
  align-self:center !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}
body .topbar .topbar-inner > :is(.top-actions,.auth-links) {
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:center !important;
  min-width:0 !important;
  margin:0 !important;
}

/* Tablet layout applies to every page, including skins with their own 890px,
   900px, 1080px, or 1110px rules. */
@media (max-width:1110px) {
  :root { --od-site-side-width:225px; --od-site-side-gap:18px; --od-site-padding:17px; }
  body .topbar > .topbar-inner {
    grid-template-columns:minmax(0,1fr) minmax(180px,350px) minmax(0,1fr) !important;
    column-gap:12px !important;
  }
  body > main.shell { padding-top:22px !important; }
}
@media (min-width:741px) and (max-width:890px) {
  :root { --od-site-side-width:215px; --od-site-side-gap:15px; --od-site-padding:13px; }
  body > main.shell { padding-top:18px !important; }
}

/* Phones: every page has the same two-row header and one-column content. */
@media (max-width:740px) {
  :root { --od-site-padding:12px; --od-header-logo-width:190px; --od-header-logo-height:36px; }
  body .topbar { height:auto !important; min-height:0 !important; }
  body .topbar > .topbar-inner {
    height:auto !important;
    min-height:0 !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:44px 38px !important;
    column-gap:10px !important;
    row-gap:9px !important;
  }
  body .topbar .topbar-inner > a.brand { grid-column:1 !important; grid-row:1 !important; }
  body .topbar .topbar-inner > :is(.top-actions,.auth-links) {
    grid-column:2 !important; grid-row:1 !important;
  }
  body .topbar .topbar-inner > :is(form.top-search,form.search) {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
  }
  body > main.shell {
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    padding-top:16px !important;
  }
  body > main.shell > section.content {
    order:1 !important;
    flex:0 0 auto !important;
  }
  body > main.shell > aside.sidebar {
    order:2 !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
  }
}
@media (max-width:420px) {
  :root { --od-header-logo-width:165px; --od-header-logo-height:31px; }
}