/* Disable dark-theme UI (static Diplodoc has no light-only config). */
.dc-settings-control,
.dc-mobile-controls {
  display: none !important;
}

/* Hero underlay: icons live on the right; keep them beside the title on wide screens */
.pc-header-block__background .pc-storage-background-image__img {
  object-fit: cover;
  object-position: right center;
}

/*
  PC swaps desktop/mobile images only at ≤577px. Below ~1160 the icon art
  already overlaps the title, so force the neutral underlay earlier via CSS.
*/
@media only screen and (max-width: 1159px) {
  .pc-header-block__background .pc-storage-background-image {
    background-image: url("../img/hero-underlay-e-practices-mobile.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .pc-header-block__background .pc-storage-background-image__img {
    opacity: 0;
  }
}

/*
  Diplodoc app.css clears PC Grid width on landing pages:
    .pc-layout__content > .pc-Grid .container-fluid { max-width: initial; padding: 0 }
  That full-bleeds blocks after the header. Restore official PC container (~1328px).
*/
.pc-layout__content > .pc-Grid > .container-fluid {
  max-width: 1328px;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
}

/*
  Diplodoc zeroes nav padding on mobile (≤768) and keeps only 16px on desktop.
  Align logo/nav with content gutters.
*/
.pc-navigation > .container-fluid,
.pc-layout__navigation > .container-fluid {
  padding-left: 40px;
  padding-right: 40px;
}

@media only screen and (max-width: 577px) {
  .pc-layout__content > .pc-Grid > .container-fluid,
  .pc-navigation > .container-fluid,
  .pc-layout__navigation > .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/*
  Diplodoc vendor.css sets .dc-doc-page { width: 1440px } (or 1280px regular).
  Plus left TOC (~276px) and right column (~200px) that exceeds typical laptop
  viewports. Do not set overflow-x on html/body: with Diplodoc's height:100vh
  it clips the landing page constructor blocks below the fold.
*/
.dc-doc-layout {
  max-width: 100%;
  box-sizing: border-box;
}

.dc-doc-page,
.dc-doc-page.dc-doc-page_regular-page-width {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}