/* ==========================================================
   Humanists UK – modernised styling for /action/ and /news/
   Liam Whitton, October 2026. Loaded only on those pages
   (humanistsuk_2023_scripts in functions.php), and scoped as well.
   ========================================================== */

/* ---------- Shared tokens ---------- */
:root{
  --huk-purple:#4C4184;
  --huk-purple-ink:#554A8A;
  --huk-teal:#00C7B1;
  --huk-yellow:#FFCC33;
  --huk-orange:#F57B03;
  --huk-lilac:#F4F2F8;
  --huk-shadow:0 6px 24px rgba(76,65,132,.10);
}

/* ==========================================================
   1. HOW YOU CAN HELP  (/action/  – post 389)
   ========================================================== */
#post-389 .entry-title{
  font-size:clamp(36px,4vw,52px);font-weight:800;line-height:1.05;
  letter-spacing:-.01em;color:var(--huk-purple);margin:24px 0 0;
}
#post-389 .entry-title::after{
  content:"";display:block;width:64px;height:6px;border-radius:3px;
  background:var(--huk-teal);margin:18px 0 0;
}
#post-389 .entry-content > h4.wp-block-heading{
  font-size:clamp(20px,1.8vw,24px);font-weight:700;color:var(--huk-purple-ink);
  margin:18px 0 32px;max-width:46ch;line-height:1.3;
}
#post-389 .entry-content > .row{--bs-gutter-x:1.5rem;margin-bottom:32px !important}

/* Cards: white, rounded, soft shadow, gentle bulge on hover */
#post-389 .card{
  border:0 !important;border-radius:20px;background:#fff;
  box-shadow:var(--huk-shadow);padding:0;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Equal-height cards with buttons lined up along the bottom */
#post-389 .row > [class*=col-] > .wp-block-group{height:100%;align-items:stretch}
#post-389 .wp-block-humanists-uk-bootstrap-card-block{width:100%;height:100%}
#post-389 .card{display:flex;flex-direction:column;height:100%}
#post-389 .card-footer{margin-top:auto}
#post-389 .card:hover,#post-389 .card:focus-within{
  transform:scale(1.02);box-shadow:0 12px 32px rgba(76,65,132,.16);
}

/* Photos run edge to edge across the top of each card, so the card, photo, heading and breadcrumb
   all share one left edge; consistent 3:2 crop, gentle zoom on hover */
#post-389 .centeredImage300px{
  height:auto !important;aspect-ratio:3/2;border-radius:0;overflow:hidden !important;
}
#post-389 .centeredImage300px a{display:block;height:100%}
#post-389 .centeredImage300px img{
  display:block;width:100% !important;height:100% !important;object-fit:cover;margin:0 !important;transform:none !important;
  transition:transform .3s ease;
}
#post-389 .card:hover .centeredImage300px img{transform:scale(1.04) !important}

#post-389 .card-body{padding:22px 24px 8px}
#post-389 .card-title{
  font-size:23px;font-weight:800;line-height:1.2;color:var(--huk-purple);margin:0 0 12px;
}
#post-389 .card-title a{color:inherit;text-decoration:none}
#post-389 .card_body_text,#post-389 .card_body_text p{font-size:17px;line-height:1.55;font-weight:400;color:#1F1D2B}
#post-389 .card_body_text p{margin:0 0 12px}
#post-389 .card_body_text strong{font-weight:700}

/* Footer and button: purple pill, same as the campaign pages */
#post-389 .card-footer{border:0 !important;background:transparent !important;padding:8px 24px 24px !important}
#post-389 .card-footer .btn{
  display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 28px !important;border-radius:999px;
  background:var(--huk-purple);border:2px solid var(--huk-purple);color:#fff;
  font-size:19px;font-weight:700;transition:transform .15s ease, background .15s ease;
}
#post-389 .card-footer .btn:hover,#post-389 .card-footer .btn:focus-visible{
  transform:scale(1.05);background:#3B3270;border-color:#3B3270;color:#fff;
}

/* Closing text under the cards */
#post-389 .entry-content > p,#post-389 .entry-content > ul{font-size:19px;line-height:1.55;max-width:70ch}

/* ==========================================================
   2. NEWS  (/news/ – the page with the news search form)
   ========================================================== */
/* Masthead: the 'Our news and stories' banner rebuilt in code, with the conversation (speech bubbles) icon
   from our icons collection. The image stays in the page for screen readers. */
header:has(#newssearchform) > .row:first-child > .col-12{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(200px,20vw,320px);background:#4C4184;
  padding:32px clamp(24px,5vw,72px);
}
header:has(#newssearchform) > .row:first-child > .col-12 > img{
  position:absolute !important;width:1px !important;height:1px !important;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
header:has(#newssearchform) > .row:first-child > .col-12::before{
  content:"Our news\A and stories";white-space:pre;position:relative;z-index:1;text-transform:uppercase;
  font:700 clamp(38px,5.6vw,84px)/0.98 Rubik,system-ui,sans-serif;letter-spacing:.005em;color:#00C7B1;
}
header:has(#newssearchform) > .row:first-child > .col-12::after{
  content:"";position:absolute;right:clamp(16px,6vw,96px);top:50%;transform:translateY(-50%);
  width:clamp(200px,28vw,400px);aspect-ratio:71/47;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 5 71 47'%3E%3Cpath fill='%2300C7B1' d='M 74.52 50.05 C 72.11 47.37 71.23 45.95 70.36 42.17 C 74.37 37.52 75.53 31.99 73.54 26.93 C 70.95 20.33 63.66 15.71 54.54 14.87 C 54.13 14.84 53.76 15.14 53.73 15.55 C 53.69 15.95 53.99 16.32 54.40 16.35 C 62.96 17.14 69.77 21.40 72.16 27.48 C 74.00 32.17 72.88 37.14 69.00 41.46 C 68.84 41.64 68.78 41.89 68.83 42.12 C 69.58 45.56 70.31 47.29 72.17 49.59 C 70.16 49.16 68.41 48.15 66.59 47.10 C 66.01 46.76 65.41 46.42 64.80 46.08 C 64.62 45.99 64.41 45.97 64.21 46.03 C 58.80 47.84 52.70 48.61 46.56 48.26 C 45.27 48.18 33.85 47.30 29.84 39.25 C 29.71 39.00 29.46 38.84 29.18 38.84 C 24.15 38.79 19.37 38.02 14.95 36.55 C 14.76 36.48 14.54 36.50 14.36 36.60 C 13.75 36.93 13.16 37.27 12.58 37.61 C 10.75 38.67 9.00 39.68 7.00 40.10 C 8.86 37.80 9.58 36.07 10.34 32.63 C 10.39 32.40 10.33 32.16 10.17 31.98 C 6.33 27.69 5.32 22.76 7.34 18.09 C 10.19 11.49 18.22 7.07 27.79 6.84 C 29.37 6.80 43.28 6.74 48.66 15.99 C 49.91 18.14 50.57 20.64 50.65 23.43 C 50.75 27.52 49.56 30.88 47.10 33.41 C 43.67 36.93 38.42 38.18 34.65 38.18 C 34.24 38.18 33.91 38.51 33.91 38.92 C 33.91 39.33 34.24 39.67 34.65 39.67 C 38.72 39.67 44.41 38.30 48.16 34.44 C 50.92 31.62 52.25 27.90 52.13 23.39 C 52.05 20.35 51.32 17.61 49.94 15.24 C 45.54 7.66 35.24 5.18 27.76 5.35 C 17.61 5.60 9.06 10.37 5.98 17.50 C 3.79 22.55 4.82 28.06 8.80 32.68 C 7.94 36.47 7.06 37.88 4.65 40.56 C 4.45 40.78 4.40 41.10 4.53 41.37 C 4.65 41.64 4.88 41.79 5.22 41.80 C 8.41 41.74 10.80 40.36 13.32 38.90 C 13.80 38.62 14.29 38.33 14.79 38.06 C 19.14 39.48 23.82 40.23 28.72 40.32 C 32.18 46.71 40.39 49.39 46.47 49.74 C 52.68 50.10 58.87 49.34 64.38 47.55 C 64.87 47.82 65.36 48.10 65.84 48.38 C 68.37 49.84 70.75 51.23 73.95 51.29 C 73.96 51.29 73.96 51.29 73.96 51.29 C 74.26 51.29 74.52 51.12 74.64 50.85 C 74.76 50.58 74.71 50.26 74.52 50.05 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:767.98px){header:has(#newssearchform) > .row:first-child > .col-12::after{opacity:.35;right:-40px}}

/* Search strip: pale lilac band, pill search box, round button */
body:has(#newssearchform) .bg-humanistsuk-web-grey{background:var(--huk-lilac) !important}
/* The search form and tagline only show from 992px, so below that the band stays empty and thin. */
@media (min-width:992px){body:has(#newssearchform) .bg-humanistsuk-web-grey{padding-top:18px;padding-bottom:18px}}
#newssearchform > div{display:flex;align-items:center;gap:10px}
#newssearchform .form-control{
  height:52px;border-radius:999px;border:2px solid #DCD8EA;padding:0 22px;
  font-size:17px;flex:1;width:auto !important;background:#fff;
}
#newssearchform .form-control:focus{border-color:var(--huk-purple);box-shadow:0 0 0 4px rgba(76,65,132,.15)}
#newssearchform .btn{
  width:52px;height:52px;border-radius:50%;border:0;background:var(--huk-purple);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
#newssearchform .btn svg{fill:currentColor}
#newssearchform .btn:hover{background:#3B3270}
/* Tagline: kept in capitals, in brand purple */
body:has(#newssearchform) .bg-humanistsuk-web-grey .text-uppercase{
  font-size:clamp(20px,1.7vw,26px) !important;font-weight:800 !important;line-height:1.2;color:var(--huk-purple) !important;
}

/* Grid of stories */
body:has(#newssearchform) main .row.mt-3{--bs-gutter-x:1.5rem;row-gap:12px;margin-top:36px !important}
body:has(#newssearchform) main article .card{background:transparent;transition:transform .2s ease}
body:has(#newssearchform) main article .card:hover{transform:scale(1.02)}
/* The theme centres these images with margin-left:50% + translateX(-50%); we reset that so the
   hover zoom doesn't slide them sideways. */
/* Thumbnails keep the 1200 x 630 shape of our featured images, so text cards are never cropped */
body:has(#newssearchform) main .centeredImage250px{
  height:auto !important;aspect-ratio:1200/630;border-radius:18px;overflow:hidden;box-shadow:var(--huk-shadow);
}
body:has(#newssearchform) main .centeredImage250px a{display:block;height:100%}
body:has(#newssearchform) main .centeredImage250px img{width:100% !important;height:100% !important;object-fit:cover;margin:0 !important;transform:none !important}
body:has(#newssearchform) main .centeredImage250px img{transition:transform .3s ease}
body:has(#newssearchform) main article .card:hover .centeredImage250px img{transform:scale(1.04) !important}
body:has(#newssearchform) main .card-body{padding:16px 2px 8px}
body:has(#newssearchform) main .card-title{font-size:21px !important;line-height:1.3;margin-bottom:8px}
body:has(#newssearchform) main .card-title a{color:var(--huk-purple);font-weight:700}
body:has(#newssearchform) main .card-title a:hover{text-decoration:underline !important;text-underline-offset:4px}
body:has(#newssearchform) main .card-body .text-muted{font-size:15px !important;color:#6B6790 !important;display:flex;align-items:center;gap:8px}
body:has(#newssearchform) main .card-body .text-muted::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--huk-teal)}

/* Lead story: the newest item runs full width, photo left, headline right.
   First page only: later pages have a '« Newer' link (rel="prev"). */
@media (min-width:992px){
  body:has(#newssearchform):not(:has(.pagination a[rel=prev])) main .row.mt-3 > div:first-child{flex:0 0 100%;max-width:100%;margin-bottom:24px}
  body:has(#newssearchform):not(:has(.pagination a[rel=prev])) main .row.mt-3 > div:first-child .card{
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center;
    background:var(--huk-lilac) !important;padding:32px;border-radius:24px;
  }
  body:has(#newssearchform):not(:has(.pagination a[rel=prev])) main .row.mt-3 > div:first-child .card-title{font-size:clamp(30px,2.8vw,40px) !important;line-height:1.1}
  body:has(#newssearchform):not(:has(.pagination a[rel=prev])) main .row.mt-3 > div:first-child .card-title a{font-weight:800}
}

/* Pagination: purple pill */
body:has(#newssearchform) .pagination{margin:24px 0 8px;gap:12px}
body:has(#newssearchform) .pagination .page-link{
  border-radius:999px !important;border:2px solid var(--huk-purple);color:var(--huk-purple);
  font-weight:700;font-size:18px;padding:14px 30px;background:#fff;transition:transform .15s ease;
}
body:has(#newssearchform) .pagination .page-link:hover{background:var(--huk-purple);color:#fff;transform:scale(1.05)}

@media (prefers-reduced-motion:reduce){
  #post-389 .card,#post-389 .card-footer .btn,#post-389 .centeredImage300px img,
  body:has(#newssearchform) main article .card,body:has(#newssearchform) main .centeredImage250px img,
  body:has(#newssearchform) .pagination .page-link{transition:none}
}