/**
 * HAPPITA — LEGAL PAGES (Privacy Policy, and any future terms page)
 * =============================================================================
 * Loaded only on the legal pages and scoped entirely to body.hp-legal, so
 * nothing here can reach the homepage, the shop, or the global header/footer.
 *
 * The whole page is a reading layout, so the typography does the work: a measure
 * capped at ~72 characters, generous line height, and headings that separate
 * clauses without shouting. Nothing inherits Shoptimizer's or WooCommerce's
 * legal-page defaults.
 *
 * Every size below is fluid — `clamp()` for type, `min()` for the measure — so
 * the page scales smoothly between breakpoints rather than jumping at them, and
 * no element can be wider than the viewport (no horizontal scrollbar, at any
 * width).
 *
 * @package Happita
 */

/* =========================================================================
   TOKENS
   ========================================================================= */
body.hp-legal{
  --hp-maroon:#7A0028;
  --hp-maroon-dark:#5C001E;
  --hp-maroon-soft:rgba(94,0,0,.07);
  --hp-cream:#FBF7F2;
  --hp-card:#FFFFFF;
  --hp-ink:#221016;
  --hp-body-ink:#3A2B31;        /* slightly lifted, easier over a long read */
  --hp-muted:#7A6A70;
  --hp-line:#EBE3DC;
  --hp-rad:18px;
  --hp-measure:min(100%, 860px);
  --hp-ease:cubic-bezier(.22,.61,.36,1);
  --hp-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hp-display:"Anton",system-ui,sans-serif;
  --hp-serif:"Instrument Serif",Georgia,serif;
}

body.hp-legal{background:var(--hp-cream);overflow-x:hidden}
body.hp-legal .hp-pp-hero,
body.hp-legal .hp-pp-body{background:var(--hp-cream)}

/* nothing may exceed the viewport */
body.hp-legal .hp-sec > .elementor-container{max-width:100%}
body.hp-legal img,
body.hp-legal table{max-width:100%}

/* =========================================================================
   1. HERO
   ========================================================================= */
body.hp-legal .hp-pp-hero-col > .elementor-widget-wrap{
  width:var(--hp-measure);margin:0 auto;
}
body.hp-legal .hp-pp-eyebrow .elementor-heading-title{
  display:inline-block;
  font-family:var(--hp-body);font-size:11.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--hp-maroon);
  background:var(--hp-maroon-soft);
  border-radius:999px;
  padding:8px 18px;margin:0 0 22px;line-height:1;
}
body.hp-legal .hp-pp-title .elementor-heading-title{
  font-family:var(--hp-display);
  font-size:clamp(38px,5.6vw,68px);font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:1;
  color:var(--hp-ink);margin:0 0 18px;
}
body.hp-legal .hp-pp-sub p{
  font-family:var(--hp-body);
  font-size:clamp(16px,1.6vw,18px);line-height:1.7;
  color:var(--hp-muted);margin:0 0 22px;
  max-width:62ch;
}
body.hp-legal .hp-pp-updated .elementor-heading-title{
  display:inline-block;
  font-family:var(--hp-body);font-size:13px;font-weight:600;
  color:var(--hp-muted);
  border-top:1px solid var(--hp-line);
  padding-top:18px;margin:0;
}

/* =========================================================================
   2. THE DOCUMENT
   -------------------------------------------------------------------------
   The measure is set once, on the column, and every clause inherits it. That is
   what keeps the line length readable no matter how many clauses are added or
   reordered in the editor.
   ========================================================================= */
body.hp-legal .hp-pp-doc > .elementor-widget-wrap{
  width:var(--hp-measure);
  margin:0 auto;
  background:var(--hp-card);
  border:1px solid var(--hp-line);
  border-radius:var(--hp-rad);
  box-shadow:0 10px 30px rgba(34,16,22,.06);
  padding:clamp(26px,4vw,56px) clamp(20px,4vw,56px) !important;
  align-content:start;
}

/* ---- contents list ------------------------------------------------------ */
body.hp-legal .hp-pp-toc{
  background:var(--hp-cream);
  border-radius:14px;
  padding:24px 26px;
  margin-bottom:14px !important;
}
body.hp-legal .hp-pp-toc .hp-pp-toc-label{
  font-family:var(--hp-body) !important;font-size:11.5px !important;font-weight:800 !important;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--hp-maroon) !important;margin:0 0 14px !important;
}
body.hp-legal .hp-pp-toc ol{
  margin:0;padding:0;list-style:none;counter-reset:hp-toc;
}
body.hp-legal .hp-pp-toc li{
  counter-increment:hp-toc;
  margin:0 0 9px;padding:0 0 0 32px;position:relative;
  font-family:var(--hp-body);font-size:15px;line-height:1.5;
}
body.hp-legal .hp-pp-toc li:last-child{margin-bottom:0}
body.hp-legal .hp-pp-toc li::before{
  content:counter(hp-toc);
  position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;
  background:var(--hp-maroon-soft);color:var(--hp-maroon);
  font-size:11px;font-weight:800;
  display:grid;place-items:center;
}
body.hp-legal .hp-pp-toc a{
  color:var(--hp-ink);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
body.hp-legal .hp-pp-toc a:hover{
  color:var(--hp-maroon);border-bottom-color:var(--hp-maroon);
}

/* ---- clause headings ---------------------------------------------------- */
body.hp-legal .hp-pp-h{
  /* the anchor lands below the sticky header rather than under it */
  scroll-margin-top:120px;
}
body.hp-legal .hp-pp-h .elementor-heading-title{
  font-family:var(--hp-body);
  font-size:clamp(20px,2.4vw,25px);font-weight:700;
  letter-spacing:-.01em;line-height:1.3;
  color:var(--hp-ink);
  margin:38px 0 0;
  padding-top:30px;
  border-top:1px solid var(--hp-line);
  position:relative;
}
/* a short maroon rule above each clause, as the section marker */
body.hp-legal .hp-pp-h .elementor-heading-title::before{
  content:"";position:absolute;top:-1px;left:0;
  width:56px;height:3px;background:var(--hp-maroon);border-radius:2px;
}
/* the first clause follows the contents list, so it needs no divider */
body.hp-legal .hp-pp-doc .elementor-widget:nth-of-type(2) .elementor-heading-title{
  margin-top:26px;padding-top:0;border-top:none;
}
body.hp-legal .hp-pp-doc .elementor-widget:nth-of-type(2) .elementor-heading-title::before{display:none}

/* ---- clause body -------------------------------------------------------- */
body.hp-legal .hp-pp-t{margin-top:0}
body.hp-legal .hp-pp-t,
body.hp-legal .hp-pp-t p,
body.hp-legal .hp-pp-t li{
  font-family:var(--hp-body);
  font-size:clamp(15.5px,1.55vw,17px);
  line-height:1.8;
  color:var(--hp-body-ink);
}
body.hp-legal .hp-pp-t p{margin:16px 0 0}
body.hp-legal .hp-pp-t p:first-child{margin-top:14px}
body.hp-legal .hp-pp-t strong{color:var(--hp-ink);font-weight:700}

/* lists: a maroon marker instead of a browser bullet */
body.hp-legal .hp-pp-t ul{
  list-style:none;margin:16px 0 0;padding:0;
}
body.hp-legal .hp-pp-t ul li{
  position:relative;padding:0 0 0 26px;margin:0 0 12px;
}
body.hp-legal .hp-pp-t ul li:last-child{margin-bottom:0}
body.hp-legal .hp-pp-t ul li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:7px;height:7px;border-radius:50%;
  background:var(--hp-maroon);opacity:.85;
}
body.hp-legal .hp-pp-t ol{margin:16px 0 0;padding-left:22px}
body.hp-legal .hp-pp-t ol li{margin:0 0 12px;padding-left:4px}
body.hp-legal .hp-pp-t ol li::marker{color:var(--hp-maroon);font-weight:700}

/* links */
body.hp-legal .hp-pp-t a{
  color:var(--hp-maroon);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(94,0,0,.28);
  /* long addresses must never force a horizontal scrollbar */
  word-break:break-word;overflow-wrap:anywhere;
  transition:color .2s,border-color .2s;
}
body.hp-legal .hp-pp-t a:hover{
  color:var(--hp-maroon-dark);border-bottom-color:var(--hp-maroon-dark);
}

/* =========================================================================
   RESPONSIVE
   -------------------------------------------------------------------------
   Type and padding are already fluid via clamp(), so these blocks only handle
   what fluid sizing cannot: rhythm and the gutter at the smallest sizes.
   ========================================================================= */
@media(max-width:1024px){
  body.hp-legal .hp-pp-hero{padding-top:64px !important;padding-bottom:44px !important}
  body.hp-legal .hp-pp-body{padding-bottom:68px !important}
}

@media(max-width:767px){
  body.hp-legal .hp-pp-hero{padding-top:48px !important;padding-bottom:34px !important}
  body.hp-legal .hp-pp-body{padding-bottom:52px !important}
  body.hp-legal .hp-pp-toc{padding:20px 18px}
  body.hp-legal .hp-pp-toc li{font-size:14.5px;padding-left:30px}
  body.hp-legal .hp-pp-h .elementor-heading-title{margin-top:30px;padding-top:24px}
  body.hp-legal .hp-pp-h{scroll-margin-top:90px}
  body.hp-legal .hp-pp-t ul li{padding-left:22px;margin-bottom:10px}
}

@media(max-width:480px){
  /* the card keeps a small gutter rather than running edge to edge */
  body.hp-legal .hp-pp-doc > .elementor-widget-wrap{
    border-radius:14px;
    padding:22px 18px !important;
  }
  body.hp-legal .hp-pp-eyebrow .elementor-heading-title{font-size:11px;padding:7px 14px;margin-bottom:18px}
  body.hp-legal .hp-pp-updated .elementor-heading-title{font-size:12.5px;padding-top:16px}
  body.hp-legal .hp-pp-t,
  body.hp-legal .hp-pp-t p,
  body.hp-legal .hp-pp-t li{line-height:1.75}
}

/* printing a policy is a real thing people do */
@media print{
  body.hp-legal{background:#fff}
  body.hp-legal .elementor-location-header,
  body.hp-legal .elementor-location-footer,
  body.hp-legal .hp-pp-toc{display:none !important}
  body.hp-legal .hp-pp-doc > .elementor-widget-wrap{
    box-shadow:none;border:none;padding:0 !important;width:100%;
  }
  body.hp-legal .hp-pp-t a{color:var(--hp-ink);border-bottom:none}
}