/* ==========================================================================
   MyCabin Privacy Policy Page Pack — frontend.css
   Clean-room build from source-design/privacy-policy-original.zip. Every
   selector is scoped under .pp-privacy-policy-clean (Page Pack Spec §5).
   Single breakpoint, min-width: 900px, matching source exactly (only
   @media query in source styles.css besides the touch-target and
   reduced-motion ones, which don't apply to this page's own markup).
   ========================================================================== */

.pp-privacy-policy-clean {
  --pp-ink:          #27272C;
  --pp-bone:         #FFFFFF;
  --pp-beige:        #FBF6F3;
  --pp-surface:      var(--pp-beige);
  --pp-accent:       #917EBC;
  --pp-accent-soft:  #CDCBFF;
  --pp-tint:         #E6E6FF;

  --pp-stone:    color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone));
  --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%,  var(--pp-bone));
  --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone));
  --pp-tint-line:        color-mix(in oklab, var(--pp-accent) 18%, var(--pp-tint));
  --pp-tint-line-strong: color-mix(in oklab, var(--pp-accent) 34%, var(--pp-tint));

  --pp-ink-72: color-mix(in oklab, var(--pp-ink) 72%, transparent);
  --pp-ink-56: color-mix(in oklab, var(--pp-ink) 65%, transparent);

  --pp-maxw:    1280px;
  --pp-gutter:  clamp(18px, 4vw, 40px);
  --pp-hdr-h:   clamp(58px, 7vw, 74px);
  --pp-sec-y-p: clamp(48px, 7vw, 104px);

  --pp-r-pill: 999px;
  --pp-r-card: 11px;

  --pp-ease:   cubic-bezier(.22, 1, .36, 1);
  --pp-t-med:  .25s;

  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  color: var(--pp-ink);
  background: var(--pp-bone);
  /* Same overflow-clip-not-hidden fix established on About Clean v1.0.0→
     v1.0.1 (see that pack's own frontend.css comment) — this root is an
     ordinary nested <div> in real WordPress, not the document's own root
     scroller, so a single-axis overflow-x:hidden risks the browser
     resolving the other (default-visible) axis to auto, silently turning
     this root into its own scroll container and breaking every
     position:sticky descendant (the "On this page" nav, below). This page
     has no horizontal-overflow source of its own, but the safe token is
     used regardless, matching every other pack in this project. */
  overflow-x: clip;
}

.pp-privacy-policy-clean,
.pp-privacy-policy-clean *,
.pp-privacy-policy-clean ::before,
.pp-privacy-policy-clean ::after {
  box-sizing: border-box;
}

/* Real WordPress typography-cascade fix (Master Workflow §44) — the active
   theme's own generated global-styles block declares a direct font-family
   rule on h1-h6 and .wp-block-button__link/.wp-element-button, which beats
   an inherited value regardless of specificity. font-family:inherit keeps
   this root as the single source of truth. */
.pp-privacy-policy-clean h1,
.pp-privacy-policy-clean h2,
.pp-privacy-policy-clean h3,
.pp-privacy-policy-clean .wp-block-button__link,
.pp-privacy-policy-clean .wp-element-button {
  font-family: inherit;
}

/* Page-wide anchor reset — source's own global a{color:ink;text-decoration:
   none} a:hover{color:accent} (styles.css §02). */
.pp-privacy-policy-clean a { color: var(--pp-ink); text-decoration: none !important; }
.pp-privacy-policy-clean a:hover { color: var(--pp-accent); text-decoration: none !important; }
.pp-privacy-policy-clean :focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.pp-privacy-policy-clean h1,
.pp-privacy-policy-clean h2,
.pp-privacy-policy-clean h3,
.pp-privacy-policy-clean p,
.pp-privacy-policy-clean ul,
.pp-privacy-policy-clean ol,
.pp-privacy-policy-clean figure {
  margin: 0;
}

/* ==========================================================================
   WordPress Flow-margin defense — every custom component that owns its own
   direct-child spacing/layout must neutralize WordPress's default Flow
   margin-block-start injection (Master Workflow §7.1/§17). Scoped to
   exactly the components below.
   ========================================================================== */
.pp-privacy-policy-clean .pp-legal-hero > *,
.pp-privacy-policy-clean .pp-legal-hero__inner > *,
.pp-privacy-policy-clean .pp-legal-hero__text > *,
.pp-privacy-policy-clean .pp-legal-summary > *,
.pp-privacy-policy-clean .pp-legal-faq > *,
.pp-privacy-policy-clean .pp-legal-section-wrap > *,
.pp-privacy-policy-clean .pp-legal-layout > *,
.pp-privacy-policy-clean .pp-legal-nav > *,
.pp-privacy-policy-clean .pp-legal-content > *,
.pp-privacy-policy-clean .pp-legal-section > *,
.pp-privacy-policy-clean .pp-legal-section__head > *,
.pp-privacy-policy-clean .pp-legal-table-wrap > *,
.pp-privacy-policy-clean .pp-legal-cta-section > *,
.pp-privacy-policy-clean .pp-legal-cta > *,
.pp-privacy-policy-clean .pp-legal-cta__copy > *,
.pp-privacy-policy-clean .pp-wrap > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
/* Top-level sections under the alignfull root are each a "later sibling"
   exposed to the same injection (Milla 47 v1.0.17 lesson, reused on every
   pack since). */
.pp-privacy-policy-clean > .pp-legal-hero,
.pp-privacy-policy-clean > .pp-legal-section-wrap,
.pp-privacy-policy-clean > .pp-legal-cta-section {
  margin-top: 0 !important;
}


/* ==========================================================================
   LAYOUT HELPER
   ========================================================================== */
.pp-privacy-policy-clean .pp-wrap {
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding-inline: var(--pp-gutter);
}


/* ==========================================================================
   LEGAL HERO
   ========================================================================== */
.pp-privacy-policy-clean .pp-legal-hero {
  padding: calc(var(--pp-hdr-h) + clamp(28px, 6vw, 48px)) 0 clamp(32px, 5vw, 48px);
  background: var(--pp-surface);
}
.pp-privacy-policy-clean .pp-legal-hero__text { max-width: 640px; }
/* margin-top !important on these three — each needs a DIFFERENT value
   (10/14/18px, source's own non-uniform rhythm), so a single flex `gap`
   on the parent can't own this relationship; !important is required so
   the value survives this page's own WordPress Flow-margin defense list
   above (`.pp-legal-hero__text > *{margin-block-start:0 !important}`),
   which targets the exact same physical property (margin-block-start ==
   margin-top in this writing mode) and would otherwise silently win over
   a plain margin-top regardless of selector specificity — this collision,
   repeated on every intentional margin-top in this file, was the actual
   root cause of this round's page-wide "gaps too small" report. */
.pp-privacy-policy-clean .pp-legal-hero__h1 {
  margin-top: 10px !important;
  font-size: clamp(34px, 8.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -.026em;
  font-weight: 500;
}
.pp-privacy-policy-clean .pp-legal-hero__updated {
  margin-top: 14px !important;
  font-size: 13px;
  color: var(--pp-ink-56);
}
.pp-privacy-policy-clean .pp-legal-hero__intro {
  margin-top: 18px !important;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--pp-ink-72);
  max-width: 62ch;
}


/* ==========================================================================
   SUMMARY ACCORDION (hero) — exclusive: source's .legal-summary carries
   data-faq-exclusive; frontend.js closes every other open row before
   opening the clicked one.
   ========================================================================== */
.pp-privacy-policy-clean .pp-legal-summary {
  /* !important — same defense-list collision as the hero text stack above
     (`.pp-legal-hero__inner > *{margin-block-start:0 !important}` would
     otherwise zero this). */
  margin-top: clamp(24px, 4vw, 32px) !important;
  background: var(--pp-tint);
  border: 1px solid var(--pp-tint-line-strong);
  border-radius: var(--pp-r-card);
  padding: clamp(8px, 1.4vw, 12px) clamp(20px, 2.6vw, 26px);
}
.pp-privacy-policy-clean .pp-legal-summary__label {
  padding: clamp(14px, 2vw, 18px) 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-accent);
}

.pp-privacy-policy-clean .pp-legal-faq__rule {
  margin: 0 !important;
  height: 0;
  border: 0;
  border-top: 1px solid var(--pp-tint-line-strong);
}
.pp-privacy-policy-clean .pp-legal-faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
  transition: color .2s;
}
.pp-privacy-policy-clean .pp-legal-faq__q:hover { color: var(--pp-accent); }
/* Plus/minus glyph — decorative CSS-generated content, matching every
   other FAQ accordion already built on this project (not a real block:
   it carries no independent editorial meaning of its own). */
.pp-privacy-policy-clean .pp-legal-faq__q::after {
  content: "+";
  flex: 0 0 22px;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  text-align: right;
  color: var(--pp-ink-56);
}
.pp-privacy-policy-clean .pp-legal-faq.pp-is-open .pp-legal-faq__q::after { content: "\2212"; }
.pp-privacy-policy-clean .pp-legal-faq__a {
  display: none;
  padding: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pp-ink-72);
  font-weight: 300;
  max-width: 52ch;
}
.pp-privacy-policy-clean .pp-legal-faq.pp-is-open .pp-legal-faq__a { display: block; }


/* ==========================================================================
   LEGAL LAYOUT — "On this page" nav + 13 sections
   ========================================================================== */
.pp-privacy-policy-clean .pp-legal-section-wrap { padding: var(--pp-sec-y-p) 0; }
.pp-privacy-policy-clean .pp-legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px);
  align-items: start;
}

.pp-privacy-policy-clean .pp-legal-nav { display: none; }
.pp-privacy-policy-clean .pp-legal-nav__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-ink-56);
  margin-bottom: 12px !important;
}
.pp-privacy-policy-clean .pp-legal-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pp-legal-nav-counter;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-privacy-policy-clean .pp-legal-nav__list li { counter-increment: pp-legal-nav-counter; }
.pp-privacy-policy-clean .pp-legal-nav__list a {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pp-ink-72);
}
.pp-privacy-policy-clean .pp-legal-nav__list a::before {
  content: counter(pp-legal-nav-counter) ".";
  flex: none;
  color: var(--pp-ink-56);
}
.pp-privacy-policy-clean .pp-legal-nav__list a:hover { color: var(--pp-ink); }
.pp-privacy-policy-clean .pp-legal-nav__list a.pp-is-active { color: var(--pp-ink); font-weight: 500; }

.pp-privacy-policy-clean .pp-legal-content {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 44px);
  min-width: 0;
}
.pp-privacy-policy-clean .pp-legal-section {
  /* Source's own scroll-margin-top (90px) plus the WordPress admin-bar
     term (Master Workflow §42 / About Clean v1.0.7 sticky-offset lesson)
     — a jump-to-section anchor computed without this offset lands the
     target partially under the admin bar on real WordPress even though
     it lands correctly in a local harness with no admin bar present. */
  scroll-margin-top: calc(90px + var(--wp-admin--admin-bar--height, 0px));
}
.pp-privacy-policy-clean .pp-legal-section__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* !important on every property below — .pp-legal-section__num is a <p>,
   and this round's real root cause (confirmed by CSS specificity, not
   guessed) is that the broader ".pp-legal-section p" paragraph-rhythm
   rule just below (added in v1.0.1) also matches this element via plain
   descendant combinator, and — because an extra element-type selector
   (" p") genuinely INCREASES specificity rather than lowering it —
   ".pp-privacy-policy-clean .pp-legal-section p" ((0,2,1)) was silently
   outranking ".pp-privacy-policy-clean .pp-legal-section__num" ((0,2,0))
   for color/font-weight/font-size, and (since that rule's margin-top is
   also !important) even beating this page's own Flow-margin defense list
   for margin-top — pushing this element down by 12px inside its flex row
   and producing BOTH of this round's reported symptoms at once: the
   number rendering in the wrong (body-text) color/weight/size, AND the
   circle appearing to sit too low relative to the heading (reported as
   "the heading sits too high"). The circle/heading geometry itself
   (.pp-legal-section__head's own flex + align-items:center) was never
   wrong — belt-and-suspenders !important here, plus the :not() exclusion
   below, both close the same hole so this can't recur either way. */
.pp-privacy-policy-clean .pp-legal-section__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--pp-r-pill) !important;
  background: var(--pp-tint) !important;
  color: var(--pp-accent) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.pp-privacy-policy-clean .pp-legal-section__head h2 {
  font-size: 18px;
  letter-spacing: -.015em;
  font-weight: 500;
}
/* Every margin-top below is !important for the same reason as the hero
   text stack above: .pp-legal-section is a direct-child target of this
   page's own Flow-margin defense list (`.pp-legal-section > *{margin-
   block-start:0 !important}`), and every one of these paragraph/list
   elements IS a direct child of .pp-legal-section in most of the 13
   sections — without !important here, the defense list silently collapsed
   the entire paragraph rhythm to 0 across the whole page, which is the
   confirmed root cause of this round's page-wide "margins too small"
   report (not a missing value — the correct source value was already
   here, just always losing to the defense list). :not(.pp-legal-section__num)
   excludes the number-circle <p> above — it is not a body paragraph and
   must not receive body-paragraph rhythm/typography (see that rule's own
   comment for the full explanation of this round's bug). */
.pp-privacy-policy-clean .pp-legal-section p:not(.pp-legal-section__num),
.pp-privacy-policy-clean .pp-legal-section li {
  margin-top: 12px !important;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--pp-ink-72);
}
.pp-privacy-policy-clean .pp-legal-section p:not(.pp-legal-section__num):first-of-type { margin-top: 16px !important; }
.pp-privacy-policy-clean .pp-legal-section strong { font-weight: 500; color: var(--pp-ink); }
.pp-privacy-policy-clean .pp-legal-section ul {
  margin-top: 12px !important;
  padding-left: 18px;
  list-style: disc;
}
.pp-privacy-policy-clean .pp-legal-section ul li { margin-top: 0 !important; }
.pp-privacy-policy-clean .pp-legal-section ul li + li { margin-top: 4px !important; }

/* --- Section 3 table — intentional horizontal scroll on narrow widths,
   not stacking (source's own responsive treatment; documented, not an
   overflow defect — Page Pack Spec §15 equivalent). --- */
.pp-privacy-policy-clean .pp-legal-table-wrap { margin-top: 16px !important; overflow-x: auto; }
.pp-privacy-policy-clean .pp-legal-table-wrap .pp-legal-table { margin: 0; }
.pp-privacy-policy-clean .pp-legal-table-wrap .pp-legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}
/* Real WordPress core/table default (@wordpress/block-library, table/
   style.css): `.wp-block-table td, .wp-block-table th { border: 1px
   solid; padding: 0.5em; }` plus `.wp-block-table thead { border-bottom:
   3px solid; }` — a full 4-side grid border on every cell (currentColor,
   i.e. black/ink) plus a second, thicker rule under the header row. This
   round's own prior CSS only ever set border-BOTTOM on th/td, so the
   other three WP-default sides were never actually removed — producing
   the boxy black-grid look this round reports ("doesn't look like the
   original"), instead of source's clean underline-only-per-row table.
   Confirmed directly against the real block-library source, not guessed.
   Every side is explicitly zeroed first, then only border-bottom is
   reapplied with source's own hairline colors. */
.pp-privacy-policy-clean .pp-legal-table-wrap .pp-legal-table thead { border-bottom: 0; }
.pp-privacy-policy-clean .pp-legal-table-wrap .pp-legal-table th,
.pp-privacy-policy-clean .pp-legal-table-wrap .pp-legal-table td {
  border: 0;
}
.pp-privacy-policy-clean .pp-legal-table-wrap .pp-legal-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-ink-56);
  border-bottom: 1px solid var(--pp-ink-line);
  white-space: nowrap;
}
.pp-privacy-policy-clean .pp-legal-table-wrap .pp-legal-table td {
  padding: 12px 14px;
  font-weight: 300;
  color: var(--pp-ink-72);
  border-bottom: 1px solid var(--pp-ink-hair);
  vertical-align: top;
}


/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.pp-privacy-policy-clean .pp-legal-cta-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-tint); }
.pp-privacy-policy-clean .pp-legal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pp-privacy-policy-clean .pp-legal-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 300px;
  min-width: 0;
}
.pp-privacy-policy-clean .pp-legal-cta__copy h2 {
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 500;
  color: var(--pp-ink);
}
.pp-privacy-policy-clean .pp-legal-cta__copy p { font-size: 14px; font-weight: 300; color: var(--pp-ink-72); }

.pp-privacy-policy-clean .pp-legal-cta__btns {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
/* Real core/buttons default (@wordpress/block-library, buttons/style.css):
   `.wp-block-buttons > .wp-block-button { display: inline-block; margin: 0; }`
   — a shrink-to-fit middle wrapper between the buttons row and the actual
   visible link. This pack's own width:100% was previously only ever set
   on the outer .wp-block-buttons row and the inner .wp-block-button__link
   — never on this middle .wp-block-button div, which stayed at its
   WP-default shrink-to-fit width regardless: the inner link's own
   width:100% then just meant "100% of an already-narrow parent," which is
   the confirmed cause of both mobile buttons rendering narrow/centered
   with empty space either side instead of spanning the full CTA column.
   !important on every level here and below, since core/buttons' own
   default flex layout (display:flex/gap/align-items) is generated at
   WordPress render time — not present in any static file this project's
   tooling can inspect — and this page has no way to locally prove exactly
   what it sets for align-items, so a plain non-important width risks
   losing to it the same way the confirmed table/margin bugs did in
   earlier rounds on this exact page. */
.pp-privacy-policy-clean .pp-legal-cta__btns .wp-block-button {
  width: 100% !important;
  margin: 0 !important;
}

/* --- Buttons — same .btn base + variant + size composition as the shared
   MyCabin button system, recreated here per-pack (Page Pack Spec: each
   pack owns its own CSS). --- */
.pp-privacy-policy-clean .pp-legal-cta__btns .wp-block-button__link {
  position: relative;
  display: inline-flex;
  width: 100% !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  padding: 0 19px;
  border: 0;
  border-radius: var(--pp-r-pill);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-privacy-policy-clean .pp-btn-ink .wp-block-button__link { background: var(--pp-ink); color: var(--pp-bone); }
.pp-privacy-policy-clean .pp-btn-ink .wp-block-button__link:hover { background: var(--pp-accent); color: var(--pp-bone); }
.pp-privacy-policy-clean .pp-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--pp-ink);
  border: 1px solid var(--pp-ink);
}
.pp-privacy-policy-clean .pp-btn-outline .wp-block-button__link:hover { background: var(--pp-surface); color: var(--pp-ink); }


/* ==========================================================================
   DESKTOP LAYER (min-width: 900px) — single breakpoint, matching source
   styles.css §15 exactly.
   ========================================================================== */
@media (min-width: 900px) {
  .pp-privacy-policy-clean .pp-legal-layout { grid-template-columns: 220px 1fr; }
  .pp-privacy-policy-clean .pp-legal-nav {
    display: block;
    position: sticky;
    /* Source: top: calc(var(--hdr-h) + 24px). This pack owns no header (a
       separate Site Part does), but the header still physically overlays
       the page's top regardless of which component renders it — same
       reasoning as About Clean's own sticky heading (Master Workflow §42),
       plus the admin-bar term for real-WordPress robustness. */
    top: calc(var(--pp-hdr-h) + 24px + var(--wp-admin--admin-bar--height, 0px));
  }
  .pp-privacy-policy-clean .pp-legal-cta__btns { flex-direction: row; width: auto; }
  .pp-privacy-policy-clean .pp-legal-cta__btns .wp-block-button { width: auto !important; }
  .pp-privacy-policy-clean .pp-legal-cta__btns .wp-block-button__link { width: auto !important; }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pp-privacy-policy-clean * {
    scroll-behavior: auto !important;
  }
}