/* Atlantic Road Seaside Housing — Privacy & Cookies page
   Loads after css/main.css (tokens, base, header, footer).
   Like faq.css this page's header is SOLID LIGHT from the first pixel — there
   is no photographic hero to sit over. The cookie-banner styles are NOT here:
   the banner appears on every page, so `.cc-*` lives in css/main.css. */
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Header + overlay (shared) — same override set as css/faq.css. The hero rules
   in main.css are guarded by :not(.scrolled), which contributes the class's
   specificity, so plain .site-header selectors here would lose the cascade. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.1rem clamp(20px,4vw,56px);color:var(--fjord);background:var(--mist);box-shadow:0 1px 0 rgba(19,43,58,.08)}
.site-header::before{content:none}
.site-header:not(.scrolled) .brand,
.site-header:not(.scrolled) .menu-toggle,
.site-header:not(.scrolled) .header-book{text-shadow:none}
.site-header:not(.scrolled) .brand small{color:var(--brass-ink)}

/* Hero */
.pp-hero{padding:11rem 0 4.5rem;background:var(--fjord);color:var(--linen)}
.pp-hero .eyebrow{color:var(--brass)} /* dark bg — brass over brass-ink */
.pp-hero h1{font-size:clamp(2.4rem,5vw,4rem);max-width:20ch}
.pp-hero p{max-width:62ch;margin-top:1.4rem;color:rgba(237,231,220,.75)}
.pp-updated{margin-top:1.8rem;font-family:var(--accent);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(237,231,220,.6)}
.crumb{font-family:var(--accent);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(237,231,220,.6);margin-bottom:2rem;display:block}

/* Body: sticky table of contents + prose column (mirrors .faq-layout) */
.pp-section{padding:clamp(4rem,8vw,7rem) 0}
.pp-layout{display:grid;grid-template-columns:240px 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.pp-toc{position:sticky;top:110px;list-style:none}
.pp-toc li{margin-bottom:.6rem}
.pp-toc a{font-family:var(--accent);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);transition:color .3s}
.pp-toc a:hover{color:var(--brass-ink)}

.pp-body{max-width:72ch}
.pp-body h2{
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin:3.4rem 0 1.2rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--brass);
  scroll-margin-top:110px;   /* fixed header must not cover a TOC jump target */
}
.pp-body > h2:first-child{margin-top:0}
.pp-body h3{font-size:1.1rem;margin:2rem 0 .6rem;color:var(--fjord)}
.pp-body p{color:var(--slate);font-size:.98rem;margin-bottom:1rem}
.pp-body ul{color:var(--slate);font-size:.98rem;margin:0 0 1.2rem 1.2rem}
.pp-body li{margin-bottom:.5rem}
.pp-body a{color:var(--brass-ink);text-decoration:underline;text-underline-offset:3px}
.pp-body a:hover{color:var(--petrol)}
.pp-body strong{font-weight:500;color:var(--fjord)}
.pp-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--linen);padding:.1em .4em}

/* Controller card — the one block a supervisory authority looks for first */
.pp-card{
  background:var(--linen);
  border:1px solid var(--line);
  padding:clamp(1.6rem,3vw,2.4rem);
  margin-bottom:1.4rem;
}
.pp-card p{margin-bottom:.3rem}
.pp-card p:last-child{margin-bottom:0}

/* Processor / data table. Wide content scrolls in its own box — the page body
   must never scroll horizontally. */
.pp-table-scroll{overflow-x:auto;margin-bottom:1.4rem}
.pp-table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem;color:var(--slate)}
.pp-table th,.pp-table td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.pp-table th{
  font-family:var(--accent);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fjord);font-weight:400;border-bottom:1px solid var(--brass);
}

/* "Manage cookie preferences" — how consent is WITHDRAWN, which the law wants
   to be as easy as giving it. js/main.js binds [data-consent-open]. */
.pp-consent{
  background:var(--linen);
  border:1px solid var(--line);
  padding:clamp(1.6rem,3vw,2.4rem);
  margin:1.4rem 0;
}
.pp-consent p{margin-bottom:1.2rem}
.pp-consent .btn{color:var(--fjord)}
.pp-consent-state{
  display:block;margin-top:1rem;
  font-family:var(--accent);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-ink);
}

@media (max-width:820px){
  .pp-layout{grid-template-columns:1fr}
  .pp-toc{position:static;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
}