/* print  */
/* also view viewonly.css for iframe & presentation view */

/* helpers: */
/* - do everything in cm like literally for print
   - aspect-ratio not working on print css */

/* @media print > swap to screen for css work > doenst show everything right but some things { */
@media print {

/* page breaks and margins */
  @page {
    margin: 2cm .5cm .5cm .5cm;
  }
  .symbol-logo,
  .avatar-logo,
  .color-kit,
  .type-kit,
  .mockup-section {
    page-break-inside: avoid;
  }
  /* sections: */
  /* .phone-stories
     .page-app h2.bk
     .avatar-logo */

  /* sections to put on new page */
  .wordmark-logo,
  .logo-in-secondary-tertiary.file-box {
    page-break-before: always;
  }
  .logo-in-secondary-tertiary.file-box {
  }
  /* new pages */
  .page-app h2.bk,
  .page-app h3.bk {
    margin-top: 0;
  }
  .lm-edit-section.mt-4 {
    margin-top: 0 !important;
    margin-bottom: 0;
  }
  .page-app h2.bk,
  .lm-color-pickers {
    margin-bottom: 1.2cm;
  }
  .lm-color-pickers .pick-option .tint div[class^="tint-"] {
    height: 1.8cm;
  }
  /* borders */
  body {
    background-color: white;
  }
  /* needs to be visible otherwise svgs not showing up */
  .logo-preview-container {
  
  }
  /* some svg instances not showing otherwise */
  .file-box.small .logo-glyph,
  .avatar-container .logo-glyph,
  .phone-box-logo-icon .logo-glyph,
  .story-icon .logo-glyph {
    font-size: 1em !important;
    display: block !important; 
    visibility: visible !important;
    opacity: 1 !important; 
    width: auto !important;
    /* border: 2px solid green; */
  }
  .page-app .file-box,
  .lm-edit-section .logo-box,
  .lm-color-pickers .pick-option {
    border: 2px solid rgba(0,0,0,.08);
  }
  .lm-color-pickers .pick-option {
    border-right: 0;
  }
  .lm-color-pickers .pick-option:last-of-type {
    border-right: 2px solid rgba(0,0,0,.08);
  }
  .mm-admin,
  .page-app .download-logo-kit,
  .page-app .cta-pill,
  /* chat button */
  .click2Chat,
  .cc-nb-main-container {
    display: none !important;
  }
  .page-app h3.bk,
  .page-brand-kit .brand-kit h3,
  .page-brand-kit .brand-kit h4 {
    border-top: 2px solid rgba(0,0,0,.08);
  }
  .type-box {
    border-right: 2px solid rgba(0,0,0,.08);
    border-bottom: 2px solid rgba(0,0,0,.08);
  }
  /* sizing */
 .lm-edit-section .logo-box {
    max-width: inherit;
    min-height: inherit;
  }
  .viewonly .logo-preview-container,
  .page-app .brand-pres .file-box.large,
  .page-app .brand-pres .file-box.medium {
    min-height: inherit;
    /* aspect-ratio: auto; */
  }
  .page-app .avatar-container div[class*='logomark-'].file-box {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    aspect-ratio: 1 / 1;
    /* will distort if not enough space */
    width: 5cm;
    height: 5cm;
  }
  /* mockup section: give absolute values instead of % (as in screen css) otherwise mockups cut off */
  .mockup-section .row.no-gutters {
    min-height: 10cm;
  }
  .bizcard-box {
    width: auto;
  }
  .bizcard-box .bizcard-box-top,
  .bizcard-box .bizcard-box-bottom {
    height: 4cm;
  }
  .phone-box {

  }
  .comp-box {

  }
  .phone-stories {
    padding: 0 1cm;
  }
  .story {
    min-height: 9cm;
    margin-top: 1cm;
    margin-bottom: 1cm;
  }
  /* section */
  .avatar-logo {
    margin-top: 2cm;
  }
  .avatar-container .logo-glyph svg {
    /* padding-top: 3rem; */
  }

  /* ––––––––––––––––––––––––––––––––––––––––––––– reset */
  .page-app .lm-edit-section.viewonly .logo-box,
  .page-app.iframe .lm-edit-section .logo-box {
    aspect-ratio: auto;
  }
  .mockup-section .row.no-gutters {
    /* min-height: 29vw; */
    /* aspect-ratio: auto; */
  }
  .row.mb-30 .mbmobile-30 {

  }
  .page-app div[class*='logomark-'].file-box {
    /* logo symbol on PDF shifted towards bottom otherwise */
    /* reset on particular type, either letter symbol or logo symbol, see 3 classes below */
    /* padding-top: initial; */
    /* padding-bottom: initial; */
  }
  .page-app .symbol-logo div[class*='logomark-'].file-box {
    /* padding-top: 20px; */
    padding-bottom: initial;
  }
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– AVATAR */
  /* dont adjust this with screen emulation via inspector; needs actual pdf download creation */
  /* everything below works for 1 line logo with symbol */
  /* avatar section for both Letter avatar and Symbol avatar */
  .page-app .avatar-container div[class*='logomark-'].file-box div {

  }
  /* letter avatar */
  .page-app .avatar-container div[class*='logomark-'].file-box .mother-glyph {
    /* check also on diff browser widths */
    font-size: 200px;
    padding-top: 52px;
  }
  /* logo symbol avatar */
  .page-app .avatar-container div[class*='logomark-'].file-box .logo-glyph {
    /* border:2px solid green; */

  }
    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– END AVATAR */
  #content.site-content {
    padding-bottom: 1cm;
  }
  .powered {
    /* creates gray line and powered by on every page */
    /* position: fixed; */
    /* bottom: 10px;
    border-bottom: 0 !important; */
    font-size: 8pt;
  }
  .powered a {
    text-decoration: none;
  }
}