/* ==========================================================
   GoPic Unified Secondary Page Layout
   FINAL OWNER
   ========================================================== */

body.gopic-unified-page{
  --gopic-shell-width:1180px;
  --gopic-page-start:118px;

  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}


/* ----------------------------------------------------------
   Legacy spacer ownership removed.
   Common layout now owns the header -> title distance.
   ---------------------------------------------------------- */

body.gopic-unified-page .gopic-legal-header-spacer{
  display:none!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}


/* ----------------------------------------------------------
   Pages whose MAIN itself is the visible content container
   ---------------------------------------------------------- */

body.gopic-unified-page > main.page,
body.gopic-unified-page > main.support-main,
body.gopic-unified-page > main.page-card,
body.gopic-unified-page > main.wrap,
body.gopic-unified-page > main#mainContent,
body.gopic-unified-page > .page-content{
  width:min(
    var(--gopic-shell-width),
    calc(100% - 40px)
  )!important;

  max-width:none!important;

  margin-left:auto!important;
  margin-right:auto!important;

  padding-top:var(--gopic-page-start)!important;
  padding-left:0!important;
  padding-right:0!important;
}


/* ----------------------------------------------------------
   Dev diary post already owns its width through #article.wrap.
   Only vertical position is unified here.
   ---------------------------------------------------------- */

body.gopic-unified-page > main.article{
  width:100%!important;
  max-width:none!important;
  margin:0!important;

  padding-top:var(--gopic-page-start)!important;
  padding-left:0!important;
  padding-right:0!important;
}


/* Diary post actual title/content container = header width */
body.gopic-unified-page
> main.article
> .wrap{
  width:min(
    var(--gopic-shell-width),
    calc(100% - 40px)
  )!important;

  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


/* ----------------------------------------------------------
   First page heading
   No page-specific extra top gap.
   ---------------------------------------------------------- */

body.gopic-unified-page main h1:first-of-type,
body.gopic-unified-page .page-content h1:first-of-type{
  margin-top:0!important;
}


/* ----------------------------------------------------------
   IMPORTANT:
   Old support/legal pages used 720 / 760 / 820 / 860 widths.
   They may remain in old CSS but are overridden above.
   No special 760px Open Source container anymore.
   ---------------------------------------------------------- */


/* ----------------------------------------------------------
   MOBILE
   Header container uses:
   width:min(100% - 28px,620px)
   Content uses exactly the same horizontal line.
   ---------------------------------------------------------- */

@media(max-width:800px){

  body.gopic-unified-page{
    --gopic-page-start:94px;
  }

  body.gopic-unified-page > main.page,
  body.gopic-unified-page > main.support-main,
  body.gopic-unified-page > main.page-card,
  body.gopic-unified-page > main.wrap,
  body.gopic-unified-page > main#mainContent,
  body.gopic-unified-page > .page-content,
  body.gopic-unified-page > main.article > .wrap{
    width:min(
      calc(100% - 28px),
      620px
    )!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }

}