/**
 * Block skin — makes the core-block homepage/section markup match the original bespoke design
 * pixel-for-pixel. Targets custom classNames added to the blocks. Values mirror the classic theme's
 * main.css. Reused across pages so the look stays consistent. (--moana etc. come from main.css :root.)
 */

/* ---- Header: on mobile put the CTA before the menu toggle (logo | Start here | ☰) like the classic ---- */
@media (max-width: 781px) {
	.site-header .bar .nav-cta { order: 2; }
	.site-header .bar .wp-block-navigation { order: 3; }
}

/* ---- Hero (cover) — match classic widths so lines wrap identically ---- */
.mkp-hero .wp-block-cover__image-background { object-position: center 30%; }
/* Inset the hero content so it lines up with the page container (1160, centred) instead of
   hugging the viewport edge. Padding-based so it works regardless of the cover's inner width. */
.mkp-hero .wp-block-cover__inner-container { width: 100%; box-sizing: border-box;
	padding-left: max(24px, calc((100% - 1160px) / 2)) !important;
	padding-right: max(24px, calc((100% - 1160px) / 2)) !important; text-align: left; }
/* left-aligned text column within that container (constrained would centre each child) */
.mkp-hero-inner { max-width: 600px; margin-left: 0 !important; margin-right: auto !important; }
.mkp-hero-inner > * { margin-left: 0; margin-right: 0; }
.mkp-hero h1 { max-width: 16ch; margin-top: .4rem; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.mkp-hero .mkp-lede { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; max-width: 24ch; }
.mkp-hero .mkp-support { max-width: 52ch; font-size: 1.06rem; }

/* ---- Stats strip (.mkp-cred) — rangi band, moana serif numbers, centered wrapping row ---- */
.mkp-cred { background: var(--rangi); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mkp-cred-item { min-width: 120px; text-align: center; }
.mkp-cred h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--moana); line-height: 1; margin: 0; }
.mkp-cred p { font-size: .86rem; color: var(--muted); margin: .15rem 0 0; }

/* ---- Pillar cards (.mkp-pillars) — white cards, shadow, hover lift ---- */
.mkp-pillars > .wp-block-column {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	padding: 2rem 1.8rem; box-shadow: var(--shadow); transition: .2s;
}
.mkp-pillars > .wp-block-column:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
/* tighten internal spacing so top/bottom don't have big gaps (match classic .pillar) */
.mkp-pillars > .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
.mkp-pillars > .wp-block-column > * + * { margin-top: .55rem; }
.mkp-pillars > .wp-block-column > p:first-child { line-height: 1; margin-bottom: .2rem; }
.mkp-pillars > .wp-block-column h3 { color: var(--po); }
.mkp-pillars > .wp-block-column p { color: var(--muted); }

/* ---- Benefits (.mkp-benefits) — rangi cards, icon to the left ---- */
.mkp-benefits > .wp-block-column {
	background: var(--rangi); border-radius: 12px; padding: 1.3rem 1.4rem;
}
.mkp-benefits > .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
.mkp-benefit .wp-block-group > * { margin-top: 0; margin-bottom: 0; }
.mkp-benefits .mkp-benefit { display: flex; gap: .9rem; align-items: flex-start; }
.mkp-benefits .mkp-benefit-ic { font-size: 1.5rem; line-height: 1; margin: 0; }
.mkp-benefits .mkp-benefit h4 { margin: 0 0 .2rem; font-family: var(--sans); font-weight: 700; font-size: 1.02rem; color: var(--po); }
.mkp-benefits .mkp-benefit p { margin: 0; font-size: .94rem; color: var(--muted); }

/* ---- Testimonials (.mkp-quotes) — white cards, tussock left border ---- */
.mkp-quotes > .wp-block-column {
	background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--tussock);
	border-radius: 12px; padding: 1.7rem;
}
.mkp-quotes > .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
.mkp-quotes > .wp-block-column > * + * { margin-top: .8rem; }
.mkp-quotes > .wp-block-column p:first-child { font-family: var(--serif); font-size: 1.12rem; font-style: italic; color: var(--po); }
.mkp-quotes > .wp-block-column p:last-child { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: .9rem; color: var(--muted); }

/* ---- Newsletter (.mkp-newsletter) — rounded gradient box ---- */
.mkp-newsletter { background: linear-gradient(120deg, var(--moana), var(--po)) !important; border-radius: 20px; }
.mkp-newsletter .nl-groups label { display: block; margin: .3rem 0; }
.mkp-newsletter .nl-row input[type=email] { border-radius: 999px; }

/* ---- Interior page header: tussock accent bar drawn under the title (reliable vs an empty block) ---- */
.pagehead-title { margin-bottom: .35rem; }
.pagehead-title::after { content: ""; display: block; width: 64px; height: 4px; background: var(--tussock); border-radius: 2px; margin: .5rem 0 1.6rem; }
/* interior "See upcoming dates" quicknav button — small, like classic .btn-sm */
.page-quicknav .wp-block-button__link { padding: .55em 1.1em; font-size: .92rem; }

/* Interior-page headings need a bit of space beneath (block h2/h3 were too tight above lists/text) */
.entry h2, .entry h3, .entry h4 { margin-bottom: .6em; }
.entry ul, .entry ol { margin-top: 0; }

/* Global: every heading keeps the classic ~.5em space beneath (WP layout CSS zeroes block heading
   margins). Uses element+class specificity to beat the layout rule; card tightening (0-2-0) overrides. */
h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading, h4.wp-block-heading { margin-bottom: .5em; }

/* ---- Fine-print note (grey small) + FAQ accordion (native wp:details styled like classic .faq) ---- */
.fineprint { color: var(--grey); font-size: .9rem; }
.faq .wp-block-details { border: 1px solid var(--line); border-radius: 12px; margin-bottom: .7rem; background: #fff; padding: 0; }
.faq .wp-block-details summary { cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 600; color: var(--po); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-family: var(--sans); }
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after { content: "+"; font-size: 1.5rem; color: var(--tussock); line-height: 1; transition: .2s; }
.faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.faq .wp-block-details > :not(summary) { padding: 0 1.3rem 1.2rem; color: var(--muted); margin: 0; }
.faq > h2 { margin-top: 2rem; }

/* ---- Header nav: two balanced centred rows with a "|" divider between items ---- */
.site-header nav.wp-block-navigation { font-size: .92rem; flex: 1 1 auto; }
.site-header .wp-block-navigation__container { gap: .35rem 0 !important; justify-content: center !important; max-width: 660px; margin-inline: auto; }
.site-header .wp-block-navigation-item { display: flex; align-items: center; }
/* pipe separator between items (not after the last) */
.site-header .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after {
	content: "|"; color: var(--line); margin: 0 .7rem; font-weight: 400;
}
.site-header .wp-block-navigation-item__content { font-weight: 500; color: var(--po); }
.site-header .wp-block-navigation-item__content:hover { color: var(--moana); }
.site-header .menu-donate .wp-block-navigation-item__content { color: var(--tussock); font-weight: 700; }
/* the "|" desktop divider is meaningless in the stacked mobile panel — hide it there */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after { content: none !important; }

/* ---- Header logo: larger, filling more of the header's vertical space (classic is ~56px tall) ---- */
.site-header .wp-block-site-logo { width: auto !important; }
.site-header .custom-logo, .site-header .wp-block-site-logo img { height: 54px !important; width: auto !important; max-width: 300px; }

/* ---- Mobile menu: white dropdown panel below the header, matching the classic theme
       (navy links, orange Donate, divider lines) — NOT a full-screen navy overlay ---- */
.site-header{position:relative;}
/* neutralise nav's own positioning so the open panel anchors to the header (full width), not the nav */
.site-header .wp-block-navigation{position:static!important;}
.site-header .wp-block-navigation__responsive-container-open{color:var(--po)!important;}
.wp-block-navigation__responsive-container.is-menu-open{
  position:absolute!important;top:100%!important;left:0!important;right:0!important;bottom:auto!important;
  width:100%!important;height:auto!important;min-height:0!important;display:block!important;
  background:#fff!important;z-index:9999!important;padding:.25rem 24px 1rem!important;
  border-bottom:1px solid var(--line)!important;box-shadow:var(--shadow)!important;}
/* zero the modal's inner wrappers so items start right under the header (no big gap) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{padding:0!important;margin:0!important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{width:100%!important;padding:0!important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  justify-content:flex-start!important;gap:0!important;width:100%!important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%!important;}
.wp-block-navigation__responsive-container.is-menu-open a{
  color:var(--po)!important;font-size:1rem!important;font-weight:500!important;
  width:100%!important;padding:.7rem 0!important;border-bottom:1px solid var(--line)!important;}
.wp-block-navigation__responsive-container.is-menu-open .menu-donate a{color:var(--tussock)!important;font-weight:700!important;}
/* When the panel is open, hide the ☰ open button so the × is the sole control (the dropdown no
   longer covers the header the way the full-screen overlay did, so the ☰ would otherwise stay
   tappable but do nothing — can't close). */
.site-header .wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open{display:none!important;}
/* close (×) sits INSIDE the white panel at the top-right (in-flow, right-aligned) so it's always
   visible and tappable — floating it up into the header let the "Start here" button paint over it. */
.wp-block-navigation__responsive-container-close{color:var(--po)!important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  position:static!important;display:flex!important;align-items:center;justify-content:center;
  width:40px!important;height:40px!important;margin:.1rem 0 .35rem auto!important;color:var(--po)!important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{width:26px!important;height:26px!important;fill:var(--po)!important;}

/* ---- Footer logo: white, sized by height like the classic footer (the Site Logo block's
       inline width:190px otherwise renders the colour logo squashed) ---- */
.site-footer .wp-block-site-logo{width:auto!important;}
.site-footer .wp-block-site-logo img,
.site-footer img.custom-logo{
  width:auto!important;height:46px!important;max-width:230px;margin-bottom:1rem;
  filter:brightness(0) invert(1);}   /* colour logo -> clean white on the charcoal footer */

/* ---- Resources page: "Log out" pinned to the right of the page heading when signed in ---- */
.interior-wrap{position:relative;}
.mkp-logout-top{position:absolute;top:calc(var(--wp--preset--spacing--50) + .35rem);right:24px;margin:0;z-index:3;}
.mkp-logout-top .btn{margin:0;}
@media(max-width:600px){
  .mkp-logout-top{position:static;text-align:right;margin:-.25rem 0 1.25rem;}
}