/* ==========================================================================
   Privacy Policy  —  /privacy-policy/
   Paired with: pages/privacy-policy.php

   SCOPING: every rule is prefixed with .ihpp and every design token lives on
   the .ihpp wrapper, never on :root, so neither the palette nor the type
   scale can leak into the rest of the site. No JavaScript — the "On this
   page" panel appears and disappears on a media query alone.
   ========================================================================== */

.ihpp{
  /* --- palette (sampled from the Involved Holidays logo) --- */
  --ihpp-blue-900:#12283f;
  --ihpp-blue-800:#1b3f63;
  --ihpp-blue-700:#275a92;   /* logo deep blue */
  --ihpp-blue-600:#2f6ba9;
  --ihpp-blue-500:#2595c6;   /* logo sky blue */
  --ihpp-blue-050:#f3f9fc;
  --ihpp-gold-500:#ab8b44;
  --ihpp-gold-300:#dcbc74;
  --ihpp-sand:#f6f2e9;
  --ihpp-ink:#39434e;
  --ihpp-ink-soft:#54606d;
  --ihpp-line:#e6eaee;
  --ihpp-white:#ffffff;

  /* --- shape --- */
  --ihpp-font:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ihpp-radius:10px;
  --ihpp-pill:999px;
  --ihpp-shadow:0 2px 6px rgba(18,40,63,.08);
  --ihpp-max:1240px;

  /* Clearance under the sticky nav for in-page jumps and the sticky TOC.
     One number to tune if the nav height ever changes. */
  --ihpp-anchor-offset:120px;

  font-family:var(--ihpp-font);
  color:var(--ihpp-ink);
  background:var(--ihpp-white);
}

.ihpp,.ihpp *,.ihpp *::before,.ihpp *::after{box-sizing:border-box}
.ihpp img{max-width:100%;display:block}

/* The theme sets #content-area{overflow:hidden}, which silently kills
   position:sticky for anything inside it. overflow:clip does the same
   overflow job without creating a scroll container, so the TOC can stick.
   Scoped with :has() so it only applies on pages carrying .ihpp. */
#content-area:has(.ihpp){overflow:clip}

/* --------------------------------------------------------------- hero --- */

.ihpp-hero{
  position:relative;
  min-height:clamp(300px,34vw,460px);
  display:flex;
  align-items:center;
  padding:clamp(56px,9vw,120px) 24px clamp(40px,6vw,72px);

  /* Photo sits under a tinted scrim built from the brand gradient, so the
     white heading keeps its contrast whatever part of the image shows.
     The flat colour is the fallback if the image ever fails to load. */
  background-color:var(--ihpp-blue-900);
  background-image:
    linear-gradient(160deg,rgba(18,40,63,.90) 0%,rgba(27,63,99,.78) 45%,rgba(39,90,146,.58) 100%),
    url("https://involvedholidays.com/wp-content/uploads/Walking-in-Western-Algarve-blow-hole-1.webp");
  background-position:center,center;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
}
.ihpp-hero__inner{position:relative;width:100%;max-width:var(--ihpp-max);margin:0 auto}

.ihpp-eyebrow{
  font-weight:700;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ihpp-gold-300);
  margin:0 0 14px;
}

/* the_title() output — the theme's own heading colour wins here without
   !important, so the white is forced. */
.ihpp-hero__title{
  margin:0!important;
  font-weight:900!important;
  font-size:clamp(34px,6.2vw,60px)!important;
  line-height:1.06!important;
  letter-spacing:-.01em;
  color:var(--ihpp-white)!important;
  text-transform:none!important;
  max-width:20ch;
  text-wrap:balance;
}

.ihpp-hero__lead{
  margin:18px 0 0;
  font-weight:300;
  font-size:clamp(17px,2.1vw,21px);
  line-height:1.55;
  color:rgba(255,255,255,.9);
  max-width:62ch;
  text-wrap:pretty;
}

/* ------------------------------------------------------------- layout --- */

.ihpp-layout{
  max-width:var(--ihpp-max);
  margin:0 auto;
  padding:clamp(36px,5vw,72px) 24px clamp(56px,8vw,104px);
  display:flex;
  flex-wrap:wrap;
  gap:clamp(28px,4vw,56px);
  align-items:flex-start;
}

/* On this page — hidden below 1000px, no JS involved. */
.ihpp-toc{display:none}

@media (min-width:1000px){
  .ihpp-toc{
    display:block;
    flex:1 1 240px;
    max-width:300px;
    min-width:240px;
    position:sticky;
    top:var(--ihpp-anchor-offset);
    background:var(--ihpp-blue-050);
    border-radius:var(--ihpp-radius);
    padding:24px 22px;
  }
}

.ihpp-toc__label{
  font-weight:700;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ihpp-gold-500);
  margin:0 0 14px;
}
.ihpp-toc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ihpp-toc__item{margin:0}
.ihpp-toc__link{
  display:block;
  padding:8px 10px;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  color:var(--ihpp-blue-700);
  line-height:1.35;
  text-decoration:none;
  transition:background-color .16s cubic-bezier(.4,0,.2,1),color .16s cubic-bezier(.4,0,.2,1);
}
.ihpp-toc__link:hover,
.ihpp-toc__link:focus{
  background:rgba(37,90,146,.08);
  color:var(--ihpp-blue-700);
  text-decoration:none;
}

.ihpp-article{flex:1 1 560px;min-width:0;max-width:780px}

/* ------------------------------------------------------------ content --- */

.ihpp-section{scroll-margin-top:var(--ihpp-anchor-offset)}

/* The theme uppercases and top-margins every h2/h3 inside #content-area —
   both are neutralised here. */
.ihpp-h2{
  margin:0 0 16px!important;
  font-weight:700;
  font-size:clamp(24px,3.2vw,32px);
  line-height:1.2;
  color:var(--ihpp-blue-700);
  text-transform:none!important;
  text-wrap:balance;
}

.ihpp-p{
  margin:0 0 16px;
  font-size:17px;
  line-height:1.6;
  color:var(--ihpp-ink);
  max-width:68ch;
  text-wrap:pretty;
}
.ihpp-p:last-child{margin-bottom:0}
.ihpp-p--intro{margin-bottom:20px}

.ihpp-rule{
  border:0;
  border-top:1px solid var(--ihpp-line);
  height:auto;
  opacity:1;
  background:none;
  margin:clamp(32px,4vw,48px) 0;
}

.ihpp-link{font-weight:700;color:var(--ihpp-blue-500)}
.ihpp-link:hover,.ihpp-link:focus{color:var(--ihpp-blue-700)}

/* --- "How do we use your data" tiles --- */
.ihpp-uses{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}
.ihpp-uses__item{
  display:flex;
  gap:12px;
  margin:0;
  padding:14px 16px;
  background:var(--ihpp-blue-050);
  border-radius:var(--ihpp-radius);
  font-size:16px;
  line-height:1.5;
  color:var(--ihpp-ink);
}
.ihpp-uses__dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-top:8px;
  border-radius:var(--ihpp-pill);
  background:var(--ihpp-gold-500);
}

/* --- numbered rights list --- */
.ihpp-rights{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}
.ihpp-rights__item{display:flex;gap:14px;align-items:flex-start;margin:0}
.ihpp-rights__num{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:var(--ihpp-pill);
  background:var(--ihpp-blue-700);
  color:var(--ihpp-white);
  font-size:13px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ihpp-rights__text{font-size:17px;line-height:1.6;color:var(--ihpp-ink);max-width:64ch}

.ihpp-callout{background:var(--ihpp-sand);border-radius:var(--ihpp-radius);padding:clamp(20px,3vw,28px)}
.ihpp-callout .ihpp-p{max-width:64ch}

/* --- cookie type cards --- */
.ihpp-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-bottom:24px;
}
.ihpp-card{
  background:var(--ihpp-white);
  border-radius:var(--ihpp-radius);
  padding:22px;
  box-shadow:var(--ihpp-shadow);
}
.ihpp-card__title{
  margin:0 0 10px!important;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  color:var(--ihpp-blue-700);
  text-transform:none!important;
}
.ihpp-card__text{margin:0;font-size:16px;line-height:1.55;color:var(--ihpp-ink-soft);text-wrap:pretty}

/* ------------------------------------------------------------ contact --- */

.ihpp-contact{
  scroll-margin-top:var(--ihpp-anchor-offset);
  margin-top:clamp(40px,5vw,64px);
  background:var(--ihpp-blue-900);
  border-radius:var(--ihpp-radius);
  padding:clamp(28px,4vw,48px);
  color:var(--ihpp-white);
}
.ihpp-contact__title{
  margin:0 0 14px!important;
  font-weight:700;
  font-size:clamp(22px,3vw,30px);
  line-height:1.2;
  color:var(--ihpp-white)!important;
  text-transform:none!important;
  text-wrap:balance;
}
.ihpp-contact__lead{
  margin:0 0 26px;
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.86);
  max-width:62ch;
  text-wrap:pretty;
}

.ihpp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.ihpp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 26px;
  border-radius:var(--ihpp-pill);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .16s cubic-bezier(.4,0,.2,1);
}
.ihpp-btn--primary{background:var(--ihpp-blue-500);color:var(--ihpp-white)}
.ihpp-btn--primary:hover,.ihpp-btn--primary:focus{background:var(--ihpp-blue-600);color:var(--ihpp-white);text-decoration:none}
.ihpp-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:var(--ihpp-white)}
.ihpp-btn--ghost:hover,.ihpp-btn--ghost:focus{background:rgba(255,255,255,.1);color:var(--ihpp-white);text-decoration:none}

.ihpp-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
}
.ihpp-meta__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(220,188,116,.9);
  margin-bottom:8px;
}
.ihpp-meta__text{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.85)}

@media (prefers-reduced-motion:reduce){
  .ihpp *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}