/* Simplicity                                                                                               */
/* Wide Screen layout media queries                                                                         */
/*                                                                                                          */
/* NOTICE: this file was autogenerated from the template. Manual changes will be lost. */
/*                                                                                                          */ 
/*                                                                                                          */
/* Created 2020-2021 by Jan /  gosimplicity.org                                                    */
/*                                                                                                          */
/*                                                                                                          */
/* last update: 2024-08-19                                                                                  */


:root {
  /* Sidebars are off by default, enable them by setting a size and a display style. */
  --sidebar-start-inline-size: 0px;
  --content-width-normal:      32em;
  --content-width-xwide:       42em;
  --sidebar-end-inline-size:   0px;
  
  /* size of content margins. Unless specified, -end will be equal. */
  --content-margin-normal:     3em;
}



  /* ###################################################################################################### */
  /* ##             Wide Screen Layouts                                                                  ## */
  /* ###################################################################################################### */

  /*     ( developer note: the default value must be ridiculously huge for you to be able to override it )  */


  /* This layout: Wide Screen, Normal Width, No Sidebars                                                    */
  /* The media query needs to match: --content-width-normal + --content-margin-normal                       */

@media ( min-width: calc(       0px      + 3em +   32em    + 3em +      0px     ) ) {
  :root {
    --content-margin-used:      var(--content-margin-normal);
    --main-list-style-position: var(--main-list-style-position-wide);
  }
}


  /* This layout: Wide Screen, XWide Width, No Sidebars                                                    */
  /* The media query needs to match: --content-width-xwide + --content-margin-normal                       */

@media ( min-width: calc(      0px       + 3em +   42em     + 3em +      0px     ) ) {
  :root.content-xwide {
    --content-margin-used:      var(--content-margin-normal);
    --main-list-style-position: var(--main-list-style-position-wide);
  }
}


  /* This layout is: Wide Screen, Normal Width, Both Sidebars                                               */
  /* The media query needs to match: --content-width-normal, sidebars and --content-margin-normal           */

@media ( min-width: calc( 0px + 3em +   32em     + 3em + 0px ) ) {

  :root:not(.content-xwide) {
    --content-margin-used: var(--content-margin-normal);
    --content-padding-inline-start: var(--content-padding-inline-start-wide);
    --content-padding-inline-end:   var(--content-padding-inline-end-wide);

    --main-grid-template-columns: var(--main-grid-template-columns-wide);

    --autofill-start-grid-column:              var(--autofill-start-grid-column-wide);
    --sidebarStart-grid-column:                var(--sidebarStart-grid-column-wide);
    --content-margin-inline-start-grid-column: var(--content-margin-inline-start-grid-column-wide);
    --mainContentWrapper-grid-column:          var(--mainContentWrapper-grid-column-wide);
    --content-margin-inline-end-grid-column:   var(--content-margin-inline-end-grid-column-wide);
    --sidebarEnd-grid-column:                  var(--sidebarEnd-grid-column-wide);
    --autofill-end-grid-column:                var(--autofill-end-grid-column-wide);

    --sidebar-start-display:  var( --sidebar-start-display-wide, var(--sidebar-start-display-narrow) );
    --sidebar-end-display:  var( --sidebar-end-display-wide, var(--sidebar-end-display-narrow) );
    --sidebars-spacers-size: var(--sidebars-spacers-size-wide);

    --sidebars-margin-inline-start: var(--sidebars-margin-inline-start-wide);
    --sidebars-margin-inline-end:   var(--sidebars-margin-inline-end-wide);

    --poster-max-inline-size: var(--poster-max-inline-size-wide);
  }

  /* Put sidebars to the sides of the screen (as opposed to attaching them to the content) */
  :root.sidebarsOutside:not(.content-xwide) {
    --main-grid-template-columns: var(--main-grid-template-columns-wide-outside);

    --autofill-start-inline-size: var(--autofill-start-inline-size-outside);
    --autofill-end-inline-size:   var(--autofill-start-inline-size-outside);

    --autofill-start-grid-column: var(--autofill-start-grid-column-wide-outside);
    --sidebarStart-grid-column:   var(--sidebarStart-grid-column-wide-outside);
    --sidebarEnd-grid-column:     var(--sidebarEnd-grid-column-wide-outside);
    --autofill-end-grid-column:   var(--autofill-end-grid-column-wide-outside);
  }

  :root:not(.content-fullwidth):not(.sidebarsOutside):not(.content-xwide) {
    --main-border-radius-used: var(--main-border-radius);
  }

}


  /* This layout is: Wide Screen, XWide Width, Both Sidebars                                                */
  /* The media query needs to match: --content-width-xwide, sidebars and --content-margin-normal            */

@media ( min-width: calc( 0px + 3em +   42em     + 3em + 0px ) ) {

  :root.content-xwide {
    --content-margin-used: var(--content-margin-normal);
    --content-padding-inline-start: var(--content-padding-inline-start-wide);
    --content-padding-inline-end:   var(--content-padding-inline-end-wide);

    --main-grid-template-columns: var(--main-grid-template-columns-wide);

    --autofill-start-grid-column:              var(--autofill-start-grid-column-wide);
    --sidebarStart-grid-column:                var(--sidebarStart-grid-column-wide);
    --content-margin-inline-start-grid-column: var(--content-margin-inline-start-grid-column-wide);
    --mainContentWrapper-grid-column:          var(--mainContentWrapper-grid-column-wide);
    --content-margin-inline-end-grid-column:   var(--content-margin-inline-end-grid-column-wide);
    --sidebarEnd-grid-column:                  var(--sidebarEnd-grid-column-wide);
    --autofill-end-grid-column:                var(--autofill-end-grid-column-wide);

    --sidebar-start-display:  var( --sidebar-start-display-wide, var(--sidebar-start-display-narrow) );
    --sidebar-end-display:  var( --sidebar-end-display-wide, var(--sidebar-end-display-narrow) );
    --sidebars-spacers-size: var(--sidebars-spacers-size-wide);

    --sidebars-margin-inline-start: var(--sidebars-margin-inline-start-wide);
    --sidebars-margin-inline-end:   var(--sidebars-margin-inline-end-wide);

    --poster-max-inline-size: var(--poster-max-inline-size-wide);
  }

  /* Put sidebars to the sides of the screen (as opposed to attaching them to the content) */
  :root.sidebarsOutside.content-xwide {
    --main-grid-template-columns: var(--main-grid-template-columns-wide-outside);

    --autofill-start-inline-size: var(--autofill-start-inline-size-outside);
    --autofill-end-inline-size:   var(--autofill-start-inline-size-outside);

    --autofill-start-grid-column: var(--autofill-start-grid-column-wide-outside);
    --sidebarStart-grid-column:   var(--sidebarStart-grid-column-wide-outside);
    --sidebarEnd-grid-column:     var(--sidebarEnd-grid-column-wide-outside);
    --autofill-end-grid-column:   var(--autofill-end-grid-column-wide-outside);
  }

  :root:not(.content-fullwidth):not(.sidebarsOutside).content-xwide {
    --main-border-radius-used: var(--main-border-radius);
  }

}


/* todo: add for only -start, only -end, with both normal and xwide content. */