/* =====================================================================
   Humanists UK – Policy Unit restyle (Liam Whitton, October 2026)
   Applies to:
     - the Policy Unit hub  /campaigns/policy-unit/        (article containing .policy-briefings-listing)
     - every policy briefing /campaigns/policy-unit/<slug>/ (article containing .policy-summary-box)
   Loaded only on those pages (humanistsuk_2023_scripts in functions.php).
   Uses :has(), supported in all current browsers.
   ===================================================================== */

/* ---------- shared tokens ---------- */
article:has(.policy-summary-box),
article:has(.policy-briefings-listing) {
  --pu-ink: #1F1F1F;
  --pu-purple: #4C4184;
  --pu-violet: #702F8A;
  --pu-teal: #00C7B1;
  --pu-lilac: #F4F2F8;
  --pu-rule: #DBD9E6;
  color: var(--pu-ink);
}

/* ---------- masthead: the 'specialist page' signal ---------- */
/* A quiet lilac panel behind the title, with a 'document and magnifying glass' icon tile in the brand style.
   No extra text: the icon does the signalling. It's decorative, so screen readers ignore it. */
article:has(.policy-summary-box) > h1.entry-title,
article:has(.policy-briefings-listing) h1.entry-title {
  position: relative;
  margin: 0 0 28px !important;
  padding: 34px 40px 34px 124px;
  min-height: 64px;
  display: flex;
  align-items: center;
  border-radius: 24px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--pu-purple);
  background: var(--pu-lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%234C4184'/%3E%3Cpath d='M36 14H21a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3h12' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M36 14l10 10v6M36 14v10h10' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 26h6M24 33h8M24 40h5' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='41' cy='41' r='7' fill='none' stroke='%2300C7B1' stroke-width='3.4'/%3E%3Cpath d='M46 46l6 6' stroke='%2300C7B1' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") 40px 50% / 64px 64px no-repeat;
  border-bottom: 0;
}

/* ---------- briefings: a small pre-title and the review date, just below the masthead ---------- */
/* Both lines come from the briefing template (p.policy-briefing-meta, straight after the h1). */
article:has(.policy-summary-box) > h1.entry-title { margin-bottom: 18px !important; }
.policy-briefing-meta { display: flex; flex-direction: column; gap: 4px; margin: 0 0 28px; }
.policy-briefing-from { font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--pu-purple); }
.policy-briefing-reviewed { font-size: 15px; line-height: 1.3; font-weight: 300; color: var(--pu-teal); }
/* hide the hand-typed copy of the review date some briefings have at the top of their markdown block */
article:has(.policy-summary-box) .wp-block-jetpack-markdown > h2:empty { display: none; }
article:has(.policy-summary-box) .wp-block-jetpack-markdown > h2:empty + p:has(> em:only-child) { display: none; }

/* ---------- reading: comfortable measure, size and rhythm ---------- */
article:has(.policy-summary-box) .entry-content,
article:has(.policy-briefings-listing) .entry-content {
  font-size: 19px;
  line-height: 1.7;
  font-weight: 400; /* the theme's light body weight is hard to read at length */
}
article:has(.policy-summary-box) .entry-content p,
article:has(.policy-summary-box) .entry-content li,
article:has(.policy-briefings-listing) .entry-content > p {
  max-width: 68ch;
}
article:has(.policy-summary-box) .entry-content p { margin: 0 0 1.05em; }
/* the opening paragraph reads as a lead */
article:has(.policy-summary-box) .entry-content .entry-content > p:first-child,
article:has(.policy-briefings-listing) .entry-content > p:first-child {
  font-size: 21px;
  line-height: 1.6;
}
/* headings: clear hierarchy so long pages can be scanned */
article:has(.policy-summary-box) .entry-content h2,
article:has(.policy-briefings-listing) .policy-briefings-listing h3 {
  margin: 2.2em 0 0.6em;
  padding-top: 20px;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  font-weight: 800;
  color: var(--pu-purple);
  background: linear-gradient(var(--pu-teal), var(--pu-teal)) 0 0 / 64px 5px no-repeat;
}
article:has(.policy-summary-box) .entry-content h3 {
  margin: 1.9em 0 0.5em;
  padding-top: 16px;
  border-top: 1px solid var(--pu-rule);
  font-size: 25px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--pu-purple);
}
article:has(.policy-summary-box) .entry-content h4,
article:has(.policy-briefings-listing) .policy-briefings-listing h4 {
  margin: 1.5em 0 0.4em;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--pu-violet);
}
article:has(.policy-summary-box) .entry-content ul,
article:has(.policy-summary-box) .entry-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
article:has(.policy-summary-box) .entry-content li { margin-bottom: 0.45em; }
article:has(.policy-summary-box) .entry-content li::marker { color: var(--pu-violet); font-weight: 700; }
article:has(.policy-summary-box) .entry-content a,
article:has(.policy-briefings-listing) .entry-content > p a {
  color: var(--pu-purple);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
article:has(.policy-summary-box) .entry-content a:hover { color: var(--pu-violet); text-decoration-thickness: 2px; }
article:has(.policy-summary-box) .entry-content blockquote {
  margin: 1.4em 0;
  padding: 20px 24px;
  border-left: 0;
  border-radius: 14px;
  background: #E0F7F4;
  font-size: 19px;
}
article:has(.policy-summary-box) .entry-content table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}
article:has(.policy-summary-box) .entry-content th { text-align: left; color: var(--pu-purple); border-bottom: 2px solid var(--pu-purple); padding: 8px 10px; }
article:has(.policy-summary-box) .entry-content td { border-bottom: 1px solid var(--pu-rule); padding: 8px 10px; vertical-align: top; }
/* ---------- the policy summary box ---------- */
article .policy-summary-box {
  border: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(76, 65, 132, .14);
  border-top: 6px solid var(--pu-teal) !important;
}
article .policy-summary-box-desktop { margin: 0 0 28px 36px; }
article .policy-summary-box .policy-summary-image img { display: block; aspect-ratio: 1200 / 630; object-fit: cover; }
article .policy-summary-box .bg-humanistsuk-blue { background: var(--pu-purple) !important; padding: 14px 20px !important; }
article .policy-summary-box .bg-humanistsuk-blue h2 { font-size: 20px; font-weight: 800; margin: 0; padding: 0; background: none; }
article .policy-summary-box .policy-summary-fields { padding: 20px 22px 8px !important; }
article .policy-summary-box .policy-summary-fields p { font-size: 16px; line-height: 1.55; font-weight: 400; color: #1F1F1F; margin: 0 0 16px; max-width: none; }
article .policy-summary-box .policy-summary-fields strong { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 800; color: var(--pu-violet); }
article .policy-summary-box .policy-summary-fields strong + br { display: none; }

/* ---------- hub: briefing cards ---------- */
.policy-briefings-listing .row.g-3 { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
.policy-briefings-listing a.text-reset { display: block; height: 100%; text-decoration: none; transition: transform .18s ease; }
.policy-briefings-listing a.text-reset:hover { transform: scale(1.02); }
.policy-briefings-listing .card {
  border: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(76, 65, 132, .10);
}
.policy-briefings-listing .centeredImage200px { height: auto !important; aspect-ratio: 1200 / 630; overflow: hidden; }
.policy-briefings-listing .centeredImage200px img {
  width: 100% !important; height: 100% !important; object-fit: cover;
  margin: 0 !important; transform: none !important; max-width: none;
}
.policy-briefings-listing .card-body { padding: 16px 18px 20px; }
.policy-briefings-listing .card-title { font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--pu-purple) !important; }
.policy-briefings-listing a.text-reset:hover .card-title { text-decoration: underline; text-underline-offset: 4px; }
.policy-briefings-listing .card-text { font-size: 15px !important; line-height: 1.5; color: #3D3D3D !important; }
.policy-briefings-listing > h3:first-child { margin-top: 1.2em; }

/* ---------- small screens ---------- */
@media (max-width: 767.98px) {
  article:has(.policy-summary-box) > h1.entry-title,
  article:has(.policy-briefings-listing) h1.entry-title {
    padding: 22px 20px 22px 84px; min-height: 48px; border-radius: 18px;
    background-position: 20px 50%; background-size: 48px 48px;
  }
  article:has(.policy-summary-box) > h1.entry-title { margin-bottom: 14px !important; }
  .policy-briefing-from, .policy-briefing-reviewed { font-size: 14px; }
  article:has(.policy-summary-box) .entry-content,
  article:has(.policy-briefings-listing) .entry-content { font-size: 18px; }
  article .policy-summary-box { margin: 0 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .policy-briefings-listing a.text-reset { transition: none; }
  .policy-briefings-listing a.text-reset:hover { transform: none; }
}