/* PROF legal pages (Privacy Policy, Terms of Use).
   All rules scoped under .prof-legal-page so nothing leaks to other pages —
   same discipline as prof-login.css. Consumes --prof-primary / --prof-primary-hover
   from prof-theme.css.

   ---------------------------------------------------------------------------
   Sizing: every measure below is written max(<the value it has always been>,
   <that value as a share of the 1728px design canvas>).

   These pages are reached from the landing page footer, and that page scales
   its whole composition with the viewport. Written in fixed px and rem, the
   card froze at 760px with 16px copy while the page it was linked from kept
   growing, so on a large monitor the terms read as a small slip of paper in
   the middle of the screen.

   max() rather than clamp() is what makes this safe to apply to BOTH
   deployments: below 1728px the first branch always wins, so the public pages
   and the in-app pages render exactly as they did, down to the pixel, and the
   parity work documented further down is untouched. Only past the design width
   does the vw branch take over and let the page grow with the screen, which is
   the same rule the landing page follows. */

.prof-legal-page {
  min-height: 100vh;
  background-color: #f5f6f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem 3rem 1rem;
  box-sizing: border-box;
}

.prof-legal-page__logo {
  display: block;
  width: max(180px, 10.4167vw);
  height: auto;
  margin: 0 auto 1.75rem auto;
}

.prof-legal-page__card {
  background-color: #ffffff;
  width: 100%;
  max-width: max(760px, 43.9815vw);
  padding: max(2.5rem, 2.3148vw) max(3rem, 2.7778vw);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  color: #212529;
  line-height: 1.6;
}

.prof-legal-page__card h1 {
  color: var(--prof-primary);
  font-weight: 600;
  font-size: max(1.75rem, 1.6204vw);
  margin: 0 0 0.5rem 0;
}

.prof-legal-page__card h2 {
  color: #212529;
  font-weight: 600;
  font-size: max(1.125rem, 1.0417vw);
  margin: 1.75rem 0 0.5rem 0;
}

.prof-legal-page__updated {
  color: #6c757d;
  font-size: max(0.875rem, 0.8102vw);
  margin: 0 0 1.5rem 0;
}

.prof-legal-page__card p {
  font-size: max(1rem, 0.9259vw);
  margin: 0 0 1rem 0;
}

.prof-legal-page__back {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--prof-primary);
  font-weight: 500;
  font-size: max(0.9375rem, 0.8681vw);
  text-decoration: none;
}

.prof-legal-page__back:hover {
  color: var(--prof-primary-hover);
  text-decoration: underline;
}

/* Hide the legacy store-base.html dashboard chrome on these public pages. */
body.store:has(.prof-legal-page) .main-panel > .navbar,
body.store:has(.prof-legal-page) .navbar.navbar-default {
  display: none !important;
}

/* --- public-base.html: parity with how these pages look inside the app -------
   Under store-base.html the legal pages inherit two things from the dashboard
   chrome that public-base.html has no equivalent of, so the same markup used to
   render differently on the two deployments. Reproduced here rather than in
   public-base.html so the landing / request-demo pages sharing that shell stay
   untouched, and scoped to body.prof-public so the app side keeps getting the
   real thing:

   1. paper-dashboard's floated `.main-panel { width: calc(100% - 260px) }`
      leaves a 260px gutter where the sidebar would be, filled by
      stores.css `body .wrapper { background: var(--prof-primary) }`.
   2. Bootstrap reboot's `h1-h6 { line-height: 1.2 }`, paper-dashboard's
      `p { line-height: 1.4em }` and its heading/paragraph font smoothing.
      Without them the card renders 54px taller for the same copy. */

body.prof-public .prof-legal-page {
  margin-left: 260px;
  width: calc(100% - 260px);
}

/* Fixed, not in flow: the app-side gutter is viewport-height (stores.css sets
   `body { overflow-y: hidden }` and .main-panel scrolls internally), so the
   strip must not scroll away with the document here either. */
body.prof-public .prof-legal-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background-color: var(--prof-primary);
}

/* Unitless so the 0.875rem "Last updated" line lands on 19.6px and the 1rem
   body copy on 22.4px, exactly as `1.4em` resolves against each on the app. */
body.prof-public .prof-legal-page__card p {
  line-height: 1.4;
}

body.prof-public .prof-legal-page__card h1,
body.prof-public .prof-legal-page__card h2 {
  line-height: 1.2;
}

body.prof-public .prof-legal-page h1,
body.prof-public .prof-legal-page h2,
body.prof-public .prof-legal-page p,
body.prof-public .prof-legal-page a {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* Mirrors paper-dashboard's own collapse point, where `.sidebar` is hidden and
   `.main-panel` goes full width — below it the app shell shows no gutter. */
@media (max-width: 991px) {
  body.prof-public .prof-legal-page {
    margin-left: 0;
    width: 100%;
  }

  body.prof-public .prof-legal-page::before {
    content: none;
  }
}

@media (max-width: 480px) {
  .prof-legal-page__card {
    padding: 1.5rem 1.25rem;
  }
}