/* =========================================================
   Taff Catchment Partnership — block styles
   Layout & visuals are keyed to className hooks so the
   underlying WordPress blocks stay native & editable.
   Scoped under .tcp so nothing leaks into your theme.
   ========================================================= */

.tcp{
  --ink:#16332f; --cream:#f3efe4; --cream2:#ece6d6; --teal:#2d7d91;
  --green:#6f8f4f; --rust:#a8693c; --muted:#3c5651; --foot:#0f2723;
  --statlabel:#9fc0bb; --light:#cfe0dc;
  font-family:'Hanken Grotesque',system-ui,sans-serif;
  color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
.tcp *{ box-sizing:border-box; }
.tcp ::selection{ background:var(--ink); color:var(--cream); }

/* kill default block vertical margins inside our sections so our
   own spacing rules win */
.tcp .wp-block-heading,
.tcp p{ margin-top:0; margin-bottom:0; }

/* ---- shared type helpers ---- */
.tcp .tcp-eyebrow{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); }
.tcp .tcp-kicker{ font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }
.tcp .tcp-serif{ font-family:'Newsreader',serif; }
.tcp .tcp-lead{ font-size:19px; line-height:1.6; color:var(--muted); max-width:30em; }

/* ---- buttons (style the inner <a> WP generates) ---- */
.tcp .wp-block-button__link{ border-radius:999px; font-weight:600; font-size:16px; padding:14px 26px; transition:all .2s; }
.tcp .btn-ink   .wp-block-button__link{ background:var(--ink); color:var(--cream); border:1.5px solid var(--ink); }
.tcp .btn-ink   .wp-block-button__link:hover{ background:#1f4a44; border-color:#1f4a44; }
.tcp .btn-ghost .wp-block-button__link{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.tcp .btn-ghost .wp-block-button__link:hover{ background:var(--ink); color:var(--cream); }
.tcp .btn-cream .wp-block-button__link{ background:var(--cream); color:var(--ink); border:1.5px solid var(--cream); font-weight:700; }
.tcp .btn-sm    .wp-block-button__link{ font-size:14px; padding:10px 20px; }

/* ---- text links ---- */
.tcp .nl a, .tcp a.nl{ color:inherit; text-decoration:none; transition:color .2s; }
.tcp .nl a:hover, .tcp a.nl:hover{ color:var(--teal); }
.tcp .tcp-morelink a{ color:var(--ink); font-weight:600; font-size:15px; text-decoration:none; border-bottom:1.5px solid var(--teal); padding-bottom:2px; }

/* ---- image placeholder sizing ---- */
.tcp .wp-block-image{ margin:0; }
.tcp .wp-block-image img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; }

/* =================== HEADER =================== */
.tcp-header{ position:sticky; top:0; z-index:50; background:rgba(243,239,228,.86); backdrop-filter:blur(10px); border-bottom:0px solid rgba(22,51,47,.12); }
.tcp-header__inner{ max-width:1240px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; gap:28px; }
.tcp-brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.tcp-nav{ display:flex; align-items:center; gap:26px; font-size:15px; font-weight:500; }
.tcp-nav p{ margin:0; }

/* =================== HERO =================== */
.tcp-hero{ max-width:1240px; margin:0 auto; padding:64px 32px 40px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.tcp-hero__col{ display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.tcp-h1{ font-family:'Newsreader',serif; font-weight:500; font-size:62px; line-height:1.02; letter-spacing:-.02em; }
.tcp-hero__media{ position:relative; }
.tcp-hero__img img{ aspect-ratio:4/5; border-radius:18px; box-shadow:0 30px 60px -30px rgba(22,51,47,.5); }
.tcp-hero__badge{ position:absolute; left:-22px; bottom:28px; background:var(--cream); border:1px solid rgba(22,51,47,.14); border-radius:14px; padding:14px 18px; box-shadow:0 14px 30px -14px rgba(22,51,47,.4); }
.tcp-hero__btns{ display:flex; flex-wrap:wrap; gap:14px; }
.tcp-divider{ max-width:1240px; margin:0 auto; padding:0 32px; }

/* =================== STATS =================== */
.tcp-stats{ background:var(--ink); color:var(--cream); }
.tcp-stats__inner{ max-width:1240px; margin:0 auto; padding:40px 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tcp-stat__num{ font-family:'Newsreader',serif; font-size:44px; font-weight:500; line-height:1; color:var(--cream); }
.tcp-stat__label{ font-size:14px; font-weight:500; color:var(--statlabel); margin-top:6px; }

/* =================== CATCHMENT =================== */
.tcp-catchment{ max-width:1240px; margin:0 auto; padding:84px 32px; display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; align-items:center; }
.tcp-map{ background:var(--cream2); border:1px solid rgba(22,51,47,.12); border-radius:18px; padding:30px; aspect-ratio:1/1; position:relative; overflow:hidden; }
.tcp-col{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.tcp-h2{ font-family:'Newsreader',serif; font-weight:500; font-size:42px; line-height:1.08; letter-spacing:-.015em; }
.tcp-body{ font-size:17.5px; line-height:1.65; color:var(--muted); max-width:34em; }
.tcp-featgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; width:100%; }
.tcp-feat{ border-top:2px solid var(--ink); padding-top:12px; }
.tcp-feat__t{ font-weight:700; font-size:15px; margin-bottom:3px !important; }
.tcp-feat__b{ font-size:14px; color:var(--muted); line-height:1.45; }

/* =================== WORK =================== */
.tcp-work{ background:var(--cream2); border-top:1px solid rgba(22,51,47,.1); border-bottom:1px solid rgba(22,51,47,.1); }
.tcp-work__inner{ max-width:1240px; margin:0 auto; padding:84px 32px; }
.tcp-sechead{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
.tcp-cardgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.tcp-card{ background:var(--cream); border:1px solid rgba(22,51,47,.1); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; transition:transform .25s ease, box-shadow .25s ease; }
.tcp-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(22,51,47,.45); }
.tcp-card__icon{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.ic-teal{ background:var(--teal); } .ic-green{ background:var(--green); } .ic-ink{ background:var(--ink); } .ic-rust{ background:var(--rust); }
.tcp-h3{ font-family:'Newsreader',serif; font-size:22px; font-weight:600; }
.tcp-card__b{ font-size:14.5px; line-height:1.55; color:var(--muted); }

/* =================== GET INVOLVED =================== */
.tcp-involved{ max-width:1240px; margin:0 auto; padding:84px 32px; }
.tcp-involved__intro{ display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; max-width:36em; margin:0 auto 48px; }
.tcp-stepgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tcp-step{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding:30px; border:1px solid rgba(22,51,47,.14); border-radius:16px; }
.tcp-step__b{ font-size:15px; line-height:1.55; color:var(--muted); flex:1; }
.tcp-step__num{ font-family:'Newsreader',serif; font-size:15px; color:var(--teal); font-weight:600; }
.tcp-step--dark{ background:var(--ink); color:var(--cream); }
.tcp-step--dark .tcp-h3{ color:var(--cream); }
.tcp-step--dark .tcp-step__b{ color:var(--light); }
.tcp-step--dark .tcp-step__num{ color:#7fb0bf; }

/* =================== NEWS =================== */
.tcp-news{ background:var(--cream2); border-top:1px solid rgba(22,51,47,.1); }
.tcp-news__inner{ max-width:1240px; margin:0 auto; padding:84px 32px; }
.tcp-newsgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tcp-newscard{ background:var(--cream); border:1px solid rgba(22,51,47,.1); border-radius:16px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
.tcp-newscard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(22,51,47,.45); }
.tcp-newscard .wp-block-image img{ border-radius:0; aspect-ratio:16/10; }
.tcp-newscard__body{ padding:22px; display:flex; flex-direction:column; gap:10px; }
.tcp-newscard__meta{ font-size:12.5px; font-weight:600; }
.tcp-newscard__meta.cat-teal{ color:var(--teal); }
.tcp-newscard__meta.cat-green{ color:var(--green); }
.tcp-newscard__meta.cat-rust{ color:var(--rust); }
.tcp-newscard__title{ font-family:'Newsreader',serif; font-size:21px; font-weight:600; line-height:1.2; }

/* =================== PARTNERS =================== */
.tcp-partners{ max-width:1240px; margin:0 auto; padding:72px 32px 40px; text-align:center; }
.tcp-partners__kicker{ font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:26px !important; }
.tcp-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:60em; margin:0 auto; }
.tcp-pills p{ border:1px solid rgba(22,51,47,.2); color:var(--muted); border-radius:999px; padding:10px 20px; font-size:14.5px; font-weight:600; transition:all .2s; margin:0; }
.tcp-pills p:hover{ border-color:var(--teal); color:var(--ink); }

/* =================== CTA =================== */
.tcp-cta{ max-width:1240px; margin:0 auto 84px; padding:0 32px; }
.tcp-cta__box{ background:var(--ink); color:var(--cream); border-radius:24px; padding:60px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative; overflow:hidden; }
.tcp-cta__art{ position:absolute; inset:0; width:100%; height:100%; opacity:.16; pointer-events:none; }
.tcp-cta__col{ position:relative; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.tcp-cta__h{ font-family:'Newsreader',serif; font-weight:500; font-size:40px; line-height:1.08; letter-spacing:-.015em; }
.tcp-cta__sub{ font-size:17px; line-height:1.6; color:var(--light); max-width:30em; }
.tcp-cta__col--form{ gap:14px; }
.tcp-cta__col--form .wp-block-button{ width:100%; }
.tcp-cta__col--form .wp-block-button__link{ display:block; width:100%; text-align:center; padding:15px; border-radius:12px; }
.tcp-signup{ display:flex; gap:10px; width:100%; background:rgba(243,239,228,.1); border:1px solid rgba(243,239,228,.25); border-radius:12px; padding:7px 7px 7px 16px; }
.tcp-signup input{ flex:1; background:none; border:none; outline:none; color:var(--cream); font-family:inherit; font-size:15px; }
.tcp-signup input::placeholder{ color:rgba(243,239,228,.7); }
.tcp-signup button{ cursor:pointer; background:var(--green); color:var(--cream); border:none; border-radius:8px; padding:10px 18px; font-family:inherit; font-size:14px; font-weight:700; }

/* =================== FOOTER =================== */
.tcp-footer{ background:var(--foot); color:var(--light); }
.tcp-footer__inner{ max-width:1240px; margin:0 auto; padding:56px 32px 34px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.tcp-footer__brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.tcp-footer__name{ font-family:'Newsreader',serif; font-size:18px; font-weight:600; color:var(--cream); }
.tcp-footer__blurb{ font-size:14.5px; line-height:1.6; max-width:30em; }
.tcp-footer__coltitle{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7fb0bf; margin-bottom:14px !important; }
.tcp-footer__inner ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.tcp-footer__inner li{ margin:0; }
.tcp-footer__inner a{ color:var(--light); text-decoration:none; transition:color .2s; }
.tcp-footer__inner a:hover{ color:#7fb0bf; }
.tcp-footer__bar{ border-top:1px solid rgba(207,224,220,.15); }
.tcp-footer__barinner{ max-width:1240px; margin:0 auto; padding:18px 32px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:#8aa39e; }
.tcp-footer__bar p{ margin:0; }

@keyframes tcp-flowdash{ to{ stroke-dashoffset:-200; } }

/* =================== RESPONSIVE =================== */
@media(max-width:880px){
  .tcp-hero, .tcp-catchment, .tcp-cta__box{ grid-template-columns:1fr; }
  .tcp-stats__inner, .tcp-cardgrid, .tcp-footer__inner{ grid-template-columns:1fr 1fr; }
  .tcp-stepgrid, .tcp-newsgrid{ grid-template-columns:1fr; }
  .tcp-nav{ display:none; }
  .tcp-h1{ font-size:42px; }
  .tcp-cta__box{ padding:40px 28px; }
}