/*
 * Responsive shell for ordinary WordPress templates.
 * DSTRC Editor canvas pages deliberately remain full-width and unpadded.
 */

:root{
  --dstrc-content-width: 1200px;
  --dstrc-content-gutter: clamp(18px, 3vw, 36px);
}

:where(#site-main, #dstrc-canvas){
  min-inline-size: 0;
  inline-size: 100%;
}

body.dstrc-standard-page #site-main{
  inline-size: min(100%, var(--dstrc-content-width));
  margin-inline: auto;
  padding-block: clamp(28px, 4vw, 56px);
  padding-inline: var(--dstrc-content-gutter);
  padding-inline-start: max(var(--dstrc-content-gutter), env(safe-area-inset-left, 0px));
  padding-inline-end: max(var(--dstrc-content-gutter), env(safe-area-inset-right, 0px));
}

body.dstrc-editor-page #dstrc-canvas{
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
}

body.dstrc-standard-page :where(article, section, .entry-content, .entry-summary){
  min-inline-size: 0;
}

body.dstrc-standard-page :where(img, svg, video, canvas){
  max-inline-size: 100%;
  height: auto;
}

body.dstrc-standard-page :where(iframe, embed, object){
  max-inline-size: 100%;
}

body.dstrc-standard-page :where(.wp-block-table, .dstrc-table-scroll){
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.dstrc-standard-page :where(input, textarea, select, button){
  max-inline-size: 100%;
}

body.dstrc-standard-page :where(pre){
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.dstrc-standard-page :where(p, h1, h2, h3, h4, h5, h6, li, a){
  overflow-wrap: break-word;
}

@media (max-width: 1024px){
  :root{
    --dstrc-content-gutter: clamp(18px, 3.5vw, 30px);
  }

  body.dstrc-standard-page #site-main{
    padding-block: clamp(24px, 4vw, 42px);
  }
}

@media (max-width: 782px){
  :root{
    --dstrc-content-gutter: 16px;
  }

  body.dstrc-standard-page #site-main{
    padding-block: 24px;
  }
}

@media (max-width: 480px){
  body.dstrc-standard-page #site-main{
    padding-block: 20px;
  }
}