/* ========================================
   Privacy Policy Page Styles (privacy-policy.php, #210)
   ======================================== */

/* ----------------------------------------
   Page shell
---------------------------------------- */
.privacy-policy-page {
  --max-width: calc(820px + 2 * var(--content-padding));
}

/*
   The design draws no decorative lines here (functions.php skips them), so
   nothing is set on body. The bottom padding has no source in Figma — neither
   frame moved its footer up after the copy was poured in — so it matches the
   contact page's.
*/
.privacy-policy-page__section {
  padding: 48px 0 127px;

  @media screen and (min-width: 768px) {
    padding: 99px 0 216px;
  }
}

.privacy-policy-page__label {
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.6;

  @media screen and (min-width: 768px) {
    margin-bottom: 29px;
    font-size: 24px;
  }
}

.privacy-policy-page__title {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  line-height: 1.55;

  @media screen and (min-width: 768px) {
    font-size: 48px;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
  }
}

/* ----------------------------------------
   Policy document
   The body is the page's content from the editor — plain tags with no
   classes — so the rules below target tags inside this block. Anything an
   editor can produce (headings, paragraphs, lists, links, a <dl>, images)
   gets the design's spacing without markup of its own.
---------------------------------------- */
.privacy-policy-content {
  margin-top: 35px;
  font-size: 16px;
  line-height: 1.75;

  @media screen and (min-width: 768px) {
    font-size: 18px;
  }

  /*
     Every block is 16px from the one before it, and a heading opens a new
     article 40px (50px from 768px) below the previous one. main.css's own
     paragraph and heading margins are cleared so they do not add to that.
  */
  > * {
    margin-block: 0;
  }

  > * + * {
    margin-top: 16px;
  }

  > :is(h2, h3, h4):not(:first-child) {
    margin-top: 40px;

    @media screen and (min-width: 768px) {
      margin-top: 50px;
    }
  }

  h2,
  h3,
  h4 {
    font-size: inherit;
    font-weight: var(--font-weight-bold);
    line-height: inherit;
  }

  /*
     List text starts 1.5em further in per level (27/54px at 18px, 24/48px at
     16px). The markers are the UA's own: Safari only lets ::marker change color
     and font-size, so matching the design's marker spacing exactly would mean
     list-style: none plus counters, which also costs the lists their semantics
     in VoiceOver.

     <ol> sets no list-style-type on purpose. The UA default is decimal and the
     type attribute (<ol type="a">, "A", "i"…) picks the others as a
     presentational hint, which any author list-style-type on ol would override.
     <ul> does need it: the UA turns nested bullets into circles.
  */
  ol,
  ul {
    padding-inline-start: 1.5em;
  }

  ul {
    list-style-type: disc;
  }

  /* A lettered list with no numbered parent (article 3) sits at the second level. */
  > ol[type="a"] {
    padding-inline-start: 3em;
  }

  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;

    @media (hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  /*
     Inquiry desk (article 10): a paragraph (desk name, <br>, company) followed by
     a <dl> whose rows continue directly under it.

     Each value starts right after its own label, and its continuation lines
     start under the value, not under the label — the design drew that with runs
     of full-width spaces. The labels differ in width (住所： / 電話番号：), so the
     rows are floats rather than a grid: grid columns are shared by every row and
     would push the address out to where the widest label ends.

     The company line and the values break only at their spaces — between the
     company and desk names, between the postal code and the address (U+3000, as
     the SP frame does) — not mid-word, unless a single run cannot fit the line.
  */
  > p + dl {
    margin-top: 0;
  }

  > p:has(+ dl),
  dd {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  dl {
    display: flow-root;
  }

  dt {
    float: left;
    clear: left;
    margin: 0;
  }

  dd {
    display: flow-root;
    margin: 0;
  }

  /* Images inserted from the editor never overflow the column. */
  figure,
  .wp-caption {
    max-width: fit-content;
    height: auto;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-block: var(--spacing-xs);
  }
}