/*
 * privacypolicy.css
 * Purpose: page/section layout for privacypolicy/index.html (Privacy Policy).
 * Mobile-first; tablet breakpoint at 48em (768px), desktop lock-in at 75em (1200px).
 * nav and cta-footer are intentionally not styled here - they are shared partials
 * assembled around this page's markup separately.
 */

body {
  font-family: var(--font-thai-noto);
  font-variation-settings: "wdth" 100;
  color: var(--ink);
  background-color: var(--pure-white);
  overflow-x: hidden;
  overflow-wrap: anywhere;
}

main p {
  line-height: 1.8;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  background-color: var(--marimo-blue);
  color: var(--pure-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 0 0 var(--radius-xs) 0;
}

.skip-link:focus {
  left: 0;
}

/* =========================================================
   Page hero (privacy variant)
   ========================================================= */
/* Figma 2327:1600: this page's fv layers a flat blue wash
   (rgba(0,101,178,0.4)) under the shared white top gradient. */
.page-hero__gradient {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 23%),
    linear-gradient(rgba(0, 101, 178, 0.4), rgba(0, 101, 178, 0.4));
}

@media (min-width: 75em) {
  .page-hero__gradient {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 42%),
      linear-gradient(rgba(0, 101, 178, 0.4), rgba(0, 101, 178, 0.4));
  }
}

/* =========================================================
   Privacy policy body (Figma 2172:1842)
   ========================================================= */
.privacy-policy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-lg) var(--space-xs) var(--space-2xl);
}

.privacy-policy__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.privacy-policy__intro .section-heading {
  line-height: 1.8;
}

/* The source documents open with the title followed by the site the policy
   covers, so that line stays with the heading rather than drifting into the
   body. It swaps with the document language. */
.privacy-policy__scope {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--marimo-blue);
}

.policy-doc[lang="en"] .privacy-policy__scope {
  margin-block-start: var(--space-2xs);
}

.policy-doc[lang="th"] .privacy-policy__scope {
  margin-block-start: var(--space-sm);
}

.privacy-policy__subtitle {
  margin: 0;
  font-weight: 700;
}

/* Square ice-blue sheet (no radius in the Figma spec). */
.privacy-policy__card {
  width: 100%;
  background-color: var(--ice-blue);
  padding: var(--space-lg) var(--space-md);
}

/* =========================================================
   Language switch (TH / EN)
   =========================================================
   Not in the Figma file. It sits with the page title rather than inside the
   document sheet, and is built as a labelled segmented control so it reads as
   a switch: both options share one grey track and the current one is filled
   in marimo-blue. */
.policy-lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-sm);
  /* Same left/right rhythm as .breadcrumb, so the switch lines up with the
     page's content column instead of floating on its own margin. */
  padding: var(--space-xl) var(--space-lg) 0;
}

.policy-lang__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--gray-700);
}

.policy-lang__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--marimo-blue);
}

.policy-lang__label-en {
  color: var(--gray-600);
  font-family: var(--font-eng);
  font-weight: 400;
}

.policy-lang__switch {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--gray-100);
  border-radius: var(--radius-round);
}

.policy-lang__btn {
  flex: 1 1 0;
  padding: 0.5rem var(--space-sm);
  font-family: var(--font-thai-noto);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
  background-color: transparent;
  color: var(--gray-700);
  border: 0;
  border-radius: var(--radius-round);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.policy-lang__btn:hover {
  color: var(--marimo-blue);
}

.policy-lang__btn:focus-visible {
  outline: 2px solid var(--marimo-blue);
  outline-offset: 2px;
}

.policy-lang__btn.is-active {
  background-color: var(--marimo-blue);
  color: var(--pure-white);
  box-shadow: 0 1px 3px rgba(42, 42, 42, 0.18);
}

/* =========================================================
   Policy document (one per language)
   =========================================================
   Body paragraphs share the headings' left edge. The Thai definitions use
   18pt; other indented blocks use 36pt. Thai section 8 and the company names
   in section 15 stay on the main left edge. */
.policy-doc {
  --policy-indent: 2rem;

  display: flex;
  flex-direction: column;
}

/* Keep the intro-to-lead spacing independent of the body section spacing. */
.policy-doc > .policy-section,
.policy-doc > .policy-doc__sign {
  margin-block-start: 2.5em;
}

.policy-doc__lead {
  margin-block-start: var(--space-lg);
  font-size: var(--font-size-lg);
}

.policy-doc__sign {
  margin: 0;
  font-weight: 700;
}

.policy-section {
  display: flex;
  flex-direction: column;
  gap: 1.8em;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-400);
}

.policy-section__title {
  font-family: var(--font-thai-sarabun);
  font-weight: 700;
  font-size: var(--font-size-lg);
  line-height: 1.8;
}


.policy-section__title--blue {
  color: var(--marimo-blue);
}

/* --- Indented blocks (section 8 is indented in English only) ---
   The documents set these paragraphs closer together than body text, so they
   read as one block rather than as separate statements. */
.policy-indent {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding-left: var(--policy-indent);
}

.policy-indent p {
  margin: 0;
}

.policy-indent--shallow {
  padding-left: 18pt;
}

.policy-indent--none {
  padding-left: 0;
}

/* Address lines run on, so they keep no extra spacing at all. */
.policy-indent--lines {
  gap: 0;
}

/* Quoted term in a definition, and the lead-in label of a bullet. */
.policy-term {
  font-weight: 700;
}

/* --- Bulleted lists ---
   Text starts at 36pt and the bullet at 18pt, matching the Word list settings. */
.policy-bullets {
  display: flex;
  flex-direction: column;
  gap: 1.8em;
  margin: 0;
  padding-left: var(--policy-indent);
}

.policy-bullets li {
  position: relative;
  line-height: 1.8;
}

.policy-bullets li {
  list-style-type: disc;
}

.policy-bullets li::marker {
  color: var(--marimo-blue);
}

.policy-link {
  color: var(--marimo-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.policy-link:hover {
  text-decoration: none;
}

/* --- Revision history --- */
.policy-history {
  width: 100%;
  background-color: var(--pure-white);
  border: 1px solid var(--gray-400);
  font-size: var(--font-size-sm);
  line-height: 1.8;
  text-align: left;
}

.policy-history th,
.policy-history td {
  border: 1px solid var(--gray-400);
  padding: var(--space-2xs) var(--space-xs);
  vertical-align: top;
}

.policy-history thead th {
  background-color: var(--soft-blue);
  font-weight: 700;
}

.policy-history tbody th {
  font-weight: 400;
  white-space: nowrap;
}

@media (min-width: 48em) {
  .privacy-policy {
    padding: var(--space-xl) var(--space-md) var(--space-3xl);
  }

  .privacy-policy__card {
    max-width: var(--content-max-width);
    padding: var(--space-2xl);
  }

  .policy-lang {
    padding: var(--space-sm) var(--space-md) 0;
  justify-content: flex-end;
  }

  .policy-lang__btn {
    flex: 0 0 auto;
    min-width: 8rem;
  }

  .policy-section__title {
    font-size: var(--font-size-xl);
  }

  .policy-bullets {
  padding-left: calc(var(--policy-indent) + var(--space-sm));
}

  .policy-history {
    font-size: var(--font-size-md);
  }
  
}

@media (min-width: 75em) {
  .privacy-policy__card {
    padding: var(--space-3xl);
  }

  /* page-max-width + 120px padding puts the switch flush with the right edge
     of the 1200px content column, as .breadcrumb does on the left. */
  .policy-lang {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: var(--space-sm) var(--space-3xl) 0;
  }
}