/* ============================================================================
   MAB-195 -- printable legal pages (privacy-policy.asp, terms-of-services.asp)

   >>> DEPLOY THIS FILE AS:  <webroot>/css/print-legal.css  <<<
   (the shared, BRAND-NEUTRAL css/ directory -- NOT css{BRAND}/ -- so one file
   serves LVL, RSP, MSM and GCQ.  See PLAN.md section 4 for why, and for the
   exact two-line <link> edits that pull it in.)

   Retiring privacy-policy.pdf makes the printed WEB PAGE the CCPA
   "format that allows a consumer to print it out as a document".  This file
   is therefore a compliance artifact, not cosmetics.

   WHAT IT FIXES
   1. Bootstrap 3's stock print block appends every link's raw URL:
          a[href]:after { content: " (" attr(href) ")" }
      The policy is dense with links (a 9-row partner table, ~10 in-page
      anchors, several external privacy-policy links).  Left alone it inflates
      the table past the page box and clips.  ALL FOUR brands are affected --
      LVL/GCQ/RSP ship Bootstrap 3.1.1 and MSM ships 3.3.5, and both versions
      carry that rule, in bootstrap.min.css AND bootstrap.home.css.
   2. Bootstrap 3's print block does NOT hide nav or footer.  These pages pull
      in a position:fixed topbar plus the full footer; the fixed navbar prints
      on page 1 over the opening text, and the footer prints mid-document.
   3. The .container.margin wrapper carries a large margin-top to clear that
      fixed navbar; with the navbar gone it becomes a blank first page.

   SPECIFICITY NOTE -- READ BEFORE EDITING
      privacy-policy.asp and terms-of-services.asp emit inline <style> blocks
      AFTER the footer includes, i.e. AFTER this stylesheet in document order.
      Two of those rules are !important and target .margin:
          .margin { margin-top: 0px !important; }
          @media (min-width:767px){ .margin { margin-top: 95px !important; } }
      A plain `.margin{...!important}` here would TIE on specificity and LOSE
      on order.  Every rule below that competes with an existing !important
      declaration is therefore written with a `html body` prefix to raise
      specificity.  Do not "simplify" those selectors away.

   SELECTOR PROVENANCE
      Every class/id below was read out of the actual includes, not guessed:
        modules/topbar_without_login.inc
        modules/topbar_with_login.inc
        modules/topbar_with_survey_pannel_new.inc
        modules/footerbar.inc
        modules/footerlinks.inc
        modules/headlinks.inc
      Line references are in PLAN.md section 4.
   ============================================================================ */

@media print {

  /* -------------------------------------------------------------------------
     1. PAGE BOX
     ---------------------------------------------------------------------- */
  @page { margin: 0.6in; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  /* body carries class="has-nav" on both pages; the fixed navbar is gone in
     print, so its clearance must go too. */
  html body.has-nav { padding-top: 0 !important; }


  /* -------------------------------------------------------------------------
     2. NEUTRALISE BOOTSTRAP 3's URL EXPANSION
        Bootstrap's rules are NOT !important, so these win regardless of order,
        but they are marked !important anyway so a future Bootstrap 4/5 upgrade
        (which uses the same selectors) cannot reintroduce the problem.
        Deliberate trade-off: printed links lose their raw URL. The policy
        spells out the URLs that matter (e.g. the Prodege / BitLabs privacy
        policy) as literal text inside the sentence, so nothing is lost, and
        the 9-row partner table stays inside the page box.
     ---------------------------------------------------------------------- */
  a[href]:after,
  a[href]:before,
  abbr[title]:after {
    content: "" !important;
  }

  a, a:link, a:visited {
    color: #000 !important;
    text-decoration: underline !important;
  }


  /* -------------------------------------------------------------------------
     3. HIDE SITE CHROME
     ---------------------------------------------------------------------- */

  /* 3a. Topbar -- all three variants.
         topbar_without_login.inc / topbar_with_login.inc:
             div.navbar.navbar-default.navbar-fixed-top
         topbar_with_survey_pannel_new.inc:
             div.navbar.navbar-default.navbar-fixed-top.testinstruction#tempinstruction */
  html body .navbar,
  html body .navbar-fixed-top,
  html body .navbar-default,
  html body .navbar-header,
  html body .navbar-collapse,
  html body .navbar-toggle,
  html body .navbar-brand,
  html body .navbar-brandmobile,
  html body #tempinstruction,
  html body #bs-megadropdown-tabs,
  html body #btntoggel,
  html body #mobileview,
  html body #acc-dropdwn,
  html body .dropdown-menu {
    display: none !important;
  }

  /* 3b. Topbar widgets (survey-panel topbar) */
  html body #topbalanceindicator,
  html body #topbalanceindicatordesktop,
  html body #toppowerup,
  html body #toppowerupdesktop,
  html body .hidelogo,
  html body .mbllogo {
    display: none !important;
  }

  /* 3c. Overlay ("mynav") menu -- checkbox-driven, so the label and the
         checkbox both render as visible boxes in print if left alone. */
  html body .mynav,
  html body #overlay,
  html body #overlayul,
  html body .overlaymenulabels,
  html body #overlaymenulabel,
  html body #overlaymenulabel2,
  html body .menucheckboxes,
  html body #responsive-menu,
  html body #responsive-menu2,
  html body .menuicons,
  html body #menu-icon,
  html body #menu-icon2 {
    display: none !important;
  }

  /* 3d. Registration step wizard (topbar_with_login.inc) and GCQ quiz nav */
  html body .stepwizard,
  html body .stepwizard-row,
  html body .stepwizard-step,
  html body .logodesktop,
  html body .logomobile,
  html body .logodesktopoffer,
  html body .logomobileoffer,
  html body .mobilescreens,
  html body #btnRegistration,
  html body #btnOffer,
  html body #btnBonus,
  html body #signupbonusarea,
  html body .starbucks-nav-active,
  html body .starbucks-nav-inactive,
  html body .starbucks-nav-completed,
  html body .starbucks-nav-line,
  html body .starbucks-nav-lastitem,
  html body .GiftCard {
    display: none !important;
  }

  /* 3e. Footer -- footerbar.inc wraps everything in a generic div.container
         (shared with page content), so target the three
         <section class="row breath footercontent"> blocks and their columns
         rather than the container. */
  html body .footercontent,
  html body section.footercontent,
  html body .fotermanager,
  html body .madeby,
  html body .copyinfo,
  html body .social,
  html body #social-fb,
  html body #social-tw,
  html body #social-gp,
  html body .footercta,
  html body .footergray {
    display: none !important;
  }

  /* 3f. MSM "Add to Chrome" fixed footer bar (footerbar.inc:97) */
  html body .MSM-fix-chrome-wrapper,
  html body .MSM-fix-chrome-content,
  html body .MSM-fix-chrome-button,
  html body .MSM-fix-chrome-close-button,
  html body .MSM-fix-chrome-down-arrow,
  html body .MSM-jumbo-chrome-icon,
  html body #FixChromeBarButton {
    display: none !important;
  }

  /* 3g. Modals, popups and injected panels
         #needtos            footerlinks.inc  (Terms/Privacy agreement modal)
         #setPaycheckGoal    PaycheckGoalPopup.inc
         #divExitOffer       footerlinks.inc
         #div*Details etc.   topbar_with_survey_pannel_new.inc (already
                             display:none inline, belt-and-braces here) */
  html body .modal,
  html body .modal-backdrop,
  html body .modal-open,
  html body #needtos,
  html body #setPaycheckGoal,
  html body #divExitOffer,
  html body #divReviewDetails,
  html body #divCompleteDetails,
  html body #divBadgeDetails,
  html body #divPowerUpDetails,
  html body #divStreakHelp,
  html body #divLevelUpHelp,
  html body #divUnlockDetails,
  html body .ouibounce-modal,
  html body .pace,
  html body .tooltip,
  html body .popover {
    display: none !important;
  }

  /* 3h. Ads, trackers, embeds -- nothing here belongs in a legal document */
  html body iframe,
  html body ins.adsbygoogle,
  html body .adsbygoogle,
  html body .fb-like,
  html body noscript,
  html body object,
  html body embed,
  html body video,
  html body audio {
    display: none !important;
  }


  /* -------------------------------------------------------------------------
     4. LAYOUT -- let the document flow to the page box
        `html body` prefixes are required here: the page's own trailing
        <style> blocks set `.margin { margin-top: ... !important }`.
     ---------------------------------------------------------------------- */
  html body .container,
  html body .container-fluid,
  html body .container.margin,
  html body .margin,
  html body .marginsstep,
  html body .marginsstepsmenu {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
  }

  /* Bootstrap 3 grid columns: unfloat and full-width so nothing is clipped
     at the page edge.  Covers .col-md-12 (both pages) and every other col-*. */
  html body [class^="col-"],
  html body [class*=" col-"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Anything the site pinned to the viewport must return to normal flow. */
  html body .affix,
  html body [style*="position: fixed"],
  html body [style*="position:fixed"] {
    position: static !important;
  }


  /* -------------------------------------------------------------------------
     5. TYPOGRAPHY AND READABILITY
        DoD: "no text too light to read, nothing clipped".  Bootstrap's own
        print block already forces color:#000 via `*`; restated here so this
        file stands on its own.
     ---------------------------------------------------------------------- */
  html body * {
    color: #000 !important;
    background: transparent !important;
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* The page heading is emitted by privacy-policy.asp:63 with an inline
     style="color:#23306b" -- only !important overrides an inline style. */
  html body h4.notopmarnin,
  html body h1, html body h2, html body h3, html body h4,
  html body h5, html body h6 {
    color: #000 !important;
    margin-top: 0.9em;
    margin-bottom: 0.35em;
    page-break-after: avoid;
    break-after: avoid-page;
  }

  /* Section headings in the DB template are <p><u><strong>...</strong></u></p>
     and <p><strong><u>...</u></strong></p>; keep them with their body copy. */
  html body p > u > strong,
  html body p > strong > u {
    page-break-after: avoid;
    break-after: avoid-page;
  }

  html body p,
  html body li,
  html body blockquote,
  html body tr,
  html body td,
  html body th {
    page-break-inside: avoid;
    break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  html body p  { margin: 0 0 0.6em 0; }
  html body ul,
  html body ol { margin: 0 0 0.7em 1.4em; padding-left: 0.6em; }
  html body li { margin-bottom: 0.2em; }


  /* -------------------------------------------------------------------------
     6. TABLES -- the policy carries two (the tracking-partner list and the
        CCPA "categories of personal information" grid).  Bootstrap's
        .table has no print borders, and long cells can overflow the page.
     ---------------------------------------------------------------------- */
  html body table,
  html body table.table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse !important;
    margin: 0.5em 0 0.9em 0;
    page-break-inside: auto;
  }

  html body table td,
  html body table th {
    border: 1px solid #666 !important;
    padding: 4px 6px !important;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 9.5pt;
  }

  html body table th { font-weight: bold; }

  /* Repeat the header row on every page the table spans. */
  html body thead { display: table-header-group; }
  html body tfoot { display: table-footer-group; }

  /* Bootstrap 3 wraps some tables in .table-responsive, which sets
     overflow-x:auto -- that clips in print. */
  html body .table-responsive {
    overflow: visible !important;
    border: 0 !important;
    width: auto !important;
  }


  /* -------------------------------------------------------------------------
     7. MISC
     ---------------------------------------------------------------------- */
  html body img { max-width: 100% !important; height: auto !important; }

  html body .hidden-print { display: none !important; }

  /* NOTE: deliberately NOT forcing Bootstrap's .hidden-xs/.hidden-sm/... to
     display:block.  Verified that neither the legaltext template nor any of
     the topbar/footer includes uses those helpers, and such a rule would tie
     on specificity with the display:none rules above and, being later in the
     file, would win -- un-hiding chrome. */
}