/* ROAS1000X Legal template (page-legal.php): Refund policy, Privacy policy, Terms, FAQ.
   Kertas proof sama dengan home dan Contact. Tanda cetak dari courses.css, token dari theme.css.
   Setiap H2 dalam isi jadi seksyen bernombor supaya pembeli boleh rujuk "seksyen 3". */

.page-template-page-legal .roas-main,
.page-template-page-legal .roas-foot { background: var(--paper-2); }

.lg {
  --hm-mark: 28px;
  --lg-pad: 10px;
  --lg-sec: 44px;
  --slip: 0 12px 26px -16px rgba(17, 17, 17, .38), 0 1px 2px rgba(17, 17, 17, .08);
  padding: 30px var(--gutter) 44px;
  color: var(--ink);
}

/* =========================================================
   KERTAS
   ========================================================= */
.lg-sheet {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding: 24px var(--lg-pad) 30px;
  counter-reset: lg-sec;
}

.lg-hero {
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.lg-h1 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 64;
  font-weight: 900;
  font-size: clamp(2.6rem, 13vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.lg-date {
  margin: 14px 0 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.lg-date time { color: var(--ink); }

/* Nota editor: hanya keluar untuk user yang boleh edit, bila isi masih ada [PENDING */
.lg-flag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 24px 0 0;
  padding: 12px 14px;
  background: var(--red-tint);
  border: 1px solid var(--red);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.45;
}
.lg-flag strong {
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 900;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--red-deep);
}

/* =========================================================
   ISI
   ========================================================= */
.lg-body { margin-top: 28px; }
.lg-body > :where(p, ul, ol) { max-width: 68ch; }
.lg-body :where(p, li) { color: var(--ink-2); }

.lg-body :where(h2) {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .45em;
  margin: var(--lg-sec) 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  font-variation-settings: "wdth" 70;
  font-size: clamp(1.55rem, 6vw, 2.1rem);
  line-height: 1;
  counter-increment: lg-sec;
}
.lg-body :where(h2)::before {
  content: counter(lg-sec);
  flex: none;
  min-width: 1.35em;
  padding: .12em .2em 0;
  background: var(--red);
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.lg-body > :where(h2:first-child) { margin-top: 0; }
.lg-body :where(h3) {
  margin: 26px 0 8px;
  font-size: 1.15rem;
  text-transform: uppercase;
}

/* Penanda fakta yang Danial belum isi. Jelas dari jauh supaya tak terlepas publish. */
.lg-body mark.lg-pending,
.lg-body .lg-pending {
  padding: .05em .3em;
  background: var(--red-tint);
  outline: 1px dashed var(--red);
  outline-offset: -1px;
  color: var(--red-deep);
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================
   KOTAK SOALAN
   ========================================================= */
.lg-ask {
  margin-top: 48px;
  padding: 22px 18px 20px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: var(--slip);
}
.lg-ask-h {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 70;
  font-weight: 900;
  font-size: clamp(1.4rem, 5.6vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.lg-ask-p {
  max-width: 56ch;
  margin: 10px 0 18px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.lg-ask-btn { width: 100%; }

/* =========================================================
   >= 600px
   ========================================================= */
@media (min-width: 600px) {
  .lg {
    --hm-mark: 34px;
    --lg-pad: 20px;
    --lg-sec: 56px;
    padding-top: 44px;
    padding-bottom: 64px;
  }
  .lg-sheet { padding-top: 36px; padding-bottom: 40px; }
  .lg-ask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 28px;
    padding: 26px 28px;
  }
  .lg-ask-h,
  .lg-ask-p { grid-column: 1; }
  .lg-ask-p { margin-bottom: 0; }
  .lg-ask-btn { grid-column: 2; grid-row: 1 / span 2; width: auto; }
}

/* =========================================================
   >= 900px
   ========================================================= */
@media (min-width: 900px) {
  .lg {
    --hm-mark: 40px;
    --lg-pad: 48px;
    --lg-sec: 64px;
    padding-top: 64px;
    padding-bottom: 88px;
  }
  .lg-sheet { padding-top: 56px; padding-bottom: 48px; }
  .lg-body { margin-top: 36px; }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .page-template-page-legal .roas-main { background: #fff; }
  .lg { padding: 0; }
  .lg-sheet { max-width: none; padding: 0; }
  .lg .hm-crop,
  .lg .hm-reg,
  .lg-flag,
  .lg-ask-btn { display: none; }
  .lg-ask { box-shadow: none; }
}