/* Penny Brohn — site-level additions to the design system (things the templates
   need that the design package did not define). Keep small; promote anything
   reusable into the design system itself. */

/* Element reset the design relies on. In Mode A the runtime scopes the design
   system's element rules (*, ul, img, a) to .fl-ds-block only, so the theme
   restates them globally — this is exactly what assets/site.css did. */
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,h5,h6,p,blockquote,figure,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}

/* Mode A: the BB AI runtime scopes element rules (body, ul, img, *) to .fl-ds-page /
   .fl-ds-block, and the theme puts fl-ds-page on <body> so they apply site-wide.
   These two are belt-and-braces for anything rendered outside that scope. */
body{font-family:var(--ds-font-body,'Mackinac',Georgia,serif);font-weight:500;color:var(--ds-color-navy,#23375A);background:var(--ds-color-white,#FEFEFE);-webkit-font-smoothing:antialiased;}
/* Emphasis inside running text is Flink Bold (Mackinac ships in one weight). The design
   system carries the same rule, but the runtime scopes element rules to design blocks,
   so it is restated here for block-editor content and the PHP templates. */
p strong,li strong,dd strong,td strong,figcaption strong,blockquote strong{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;}
/* The runtime's typography floor (.fl-ds-page h4/h5/h6 sizes) must not resize chrome headings */
.site-footer h5{font-size:15px;}
.sb-card .sb-card-title{font-size:12px;}

/* Inner page without a sidebar: content runs full width at --ds-width-container */
.inner-grid--full,.fl-ds-page .inner-grid--full{grid-template-columns:minmax(0,1fr);}

/* Sidebar headings are h2 for outline order but keep the designed h4 look */
.sb-card .sb-card-title{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-color-mulberry,#835263);margin:0 0 14px;}
.sb-contact .sb-contact-title{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:22px;line-height:1.2;color:var(--ds-color-white,#FEFEFE);margin:0 0 10px;}
.sb-contact .sb-contact-title strong{font-weight:800;}

/* Breadcrumb inside the page-head */
.page-head .breadcrumb{gap:10px;}
.page-head .breadcrumb span[aria-current]{color:var(--ds-color-white,#FEFEFE);opacity:.9;}

/* Footer legal links */
.site-footer .footer-legal ul{display:flex;gap:20px;margin:0;padding:0;list-style:none;}
.site-footer .footer-legal li{margin:0;}
.site-footer .footer-contact .phone{font-family:'Mackinac',serif;font-size:22px;color:var(--ds-color-white,#FEFEFE);margin-bottom:10px;}
.site-footer .footer-contact .phone a{color:inherit;}
.site-footer .footer-contact p{color:rgba(254,254,254,.6);line-height:1.6;}

/* WordPress admin bar (32px, 46px at <=782px). The overlay header is
   absolutely positioned at top:0 and the mobile drawer is fixed, so both
   sit under the bar for logged-in users unless they are pushed down.
   The solid header is in normal flow and moves with html's margin-top. */
.admin-bar .site-header--overlay,
.admin-bar.fl-ds-page .site-header--overlay{top:32px;}
.admin-bar .site-menu:not([hidden]){top:calc(var(--header-h,110px) + 32px);}
@media (max-width:782px){
  .admin-bar .site-header--overlay,
  .admin-bar.fl-ds-page .site-header--overlay{top:46px;}
  .admin-bar .site-menu:not([hidden]){top:calc(var(--header-h,110px) + 46px);}
}

/* Beaver Builder pages (the old homepage until the kit lands): no furniture */
.pb-bb-page{min-height:40vh;}

/* Block content inside the inner page: intro paragraph style from the contract */
.inner-content p.is-style-intro{font-size:23px;font-weight:500;line-height:1.5;color:var(--ds-color-navy,#23375A);}

/* Gravity Forms (gravity-theme) inside the design's .form-shell: match the
   designed form (labels 14px/700, mulberry required mark, pill submit) */
.form-shell .gform_wrapper.gravity-theme{font-family:'Mackinac',Georgia,serif;}
.form-shell .gform_wrapper.gravity-theme .gform_fields{grid-row-gap:22px;}
.form-shell .gform_wrapper.gravity-theme .gfield_label,
.form-shell .gform_wrapper.gravity-theme .gform-field-label{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;font-size:14px;color:var(--ds-color-navy,#23375A);margin-bottom:7px;}
.form-shell .gform_wrapper.gravity-theme .gfield_required{color:var(--ds-color-mulberry,#835263);font-style:normal;font-size:13px;font-weight:600;padding-left:4px;}
.form-shell .gform_wrapper.gravity-theme .gfield_required_text{font-size:13px;}
.form-shell .gform_wrapper.gravity-theme input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.form-shell .gform_wrapper.gravity-theme select,
.form-shell .gform_wrapper.gravity-theme textarea{font-family:'Mackinac',Georgia,serif;font-size:16px;color:var(--ds-color-navy,#23375A);background:var(--ds-color-white,#FEFEFE);border:1px solid var(--ds-color-border-card,rgba(35,55,90,.10));border-radius:10px;padding:13px 15px;min-height:48px;width:100%;}
.form-shell .gform_wrapper.gravity-theme textarea{min-height:150px;}
.form-shell .gform_wrapper.gravity-theme input:focus,
.form-shell .gform_wrapper.gravity-theme select:focus,
.form-shell .gform_wrapper.gravity-theme textarea:focus{outline:none;border-color:var(--ds-color-teal,#1E6C82);box-shadow:0 0 0 3px rgba(30,108,130,.14);}
.form-shell .gform_wrapper.gravity-theme .gfield_description{font-family:'Mackinac',Georgia,serif;font-size:13px;line-height:1.45;color:var(--ds-color-text-muted-soft,rgba(35,55,90,.72));padding-top:6px;}
.form-shell .gform_wrapper.gravity-theme .gform_footer{margin-top:28px;padding:24px 0 0;border-top:1px solid var(--ds-color-border-faint,rgba(35,55,90,.06));}
.form-shell .gform_wrapper.gravity-theme .gform_footer input[type=submit],
.form-shell .gform_wrapper.gravity-theme .gform_button{display:inline-flex;align-items:center;justify-content:center;font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:18px;line-height:1;padding:16px 32px;border-radius:50px;border:2px solid transparent;background:var(--ds-color-navy,#23375A);color:var(--ds-color-white,#FEFEFE);cursor:pointer;transition:background .15s ease,transform .15s ease;width:auto;margin:0;}
.form-shell .gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover,
.form-shell .gform_wrapper.gravity-theme .gform_button:hover{background:#1A2A45;transform:translateY(-1px);}
.form-shell .gform_wrapper.gravity-theme .gform_footer input[type=submit]:focus-visible{outline:2px solid var(--ds-color-navy,#23375A);outline-offset:3px;}
.form-shell .gform_wrapper.gravity-theme .gform_validation_errors,
.form-shell .gform_wrapper.gravity-theme .validation_message{font-family:'Mackinac',Georgia,serif;}
.form-shell .gform_wrapper.gravity-theme .gform_confirmation_message{font-family:'Mackinac',Georgia,serif;font-size:18px;line-height:1.6;color:var(--ds-color-navy,#23375A);}

/* Tick boxes and radios. The design system styles .form-check, which is the
   hand-built markup; Gravity Forms writes .gchoice instead, so the same
   treatment is restated for it rather than left at the browser default. */
.form-shell .gform_wrapper.gravity-theme .gchoice{display:flex;align-items:flex-start;gap:11px;}
.form-shell .gform_wrapper.gravity-theme .gchoice input[type=checkbox],
.form-shell .gform_wrapper.gravity-theme .gchoice input[type=radio]{width:20px;height:20px;min-height:0;flex:none;margin:2px 0 0;accent-color:var(--ds-color-mulberry,#835263);}
.form-shell .gform_wrapper.gravity-theme .gchoice label{font-family:'Mackinac',Georgia,serif;font-weight:500;font-size:15px;line-height:1.5;color:var(--ds-color-navy,#23375A);margin:0;}
.form-shell .gform_wrapper.gravity-theme .gfield_checkbox .gchoice + .gchoice,
.form-shell .gform_wrapper.gravity-theme .gfield_radio .gchoice + .gchoice{margin-top:10px;}

/* Header dropdowns: a panel of child pages under any top-level link that
   has them. Opens on hover and keyboard focus (CSS) and on the toggle
   (js/pb-nav.js). The design's flat .nav-links row is kept; the panel is
   the design system's white card (radius 16, card shadow). */
.site-header .nav-links{align-items:center;}
.site-header .nav-item{position:relative;display:flex;align-items:center;gap:4px;}
.site-header .nav-sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:none;border-radius:50%;padding:0;cursor:pointer;color:var(--ds-color-navy,#23375A);}
.site-header .nav-sub-toggle svg{width:14px;height:14px;transition:transform .15s ease;}
.site-header .nav-sub-toggle:hover{background:rgba(35,55,90,.08);}
.site-header .nav-item:hover .nav-sub-toggle svg,.site-header .nav-item:focus-within .nav-sub-toggle svg,.site-header .nav-item.is-open .nav-sub-toggle svg{transform:rotate(180deg);}
.site-header .nav-sub{display:none;position:absolute;top:100%;left:-14px;padding-top:16px;z-index:90;min-width:280px;}
.site-header .nav-sub ul{list-style:none;margin:0;padding:10px;background:var(--ds-color-white,#FEFEFE);border-radius:16px;box-shadow:0 18px 40px -16px rgba(35,55,90,.28),0 4px 10px -4px rgba(35,55,90,.08);border:1px solid rgba(35,55,90,.06);}
.site-header .nav-item:hover>.nav-sub,.site-header .nav-item:focus-within>.nav-sub,.site-header .nav-item.is-open>.nav-sub{display:block;}
/* After Escape the toggle keeps focus, so :focus-within would reopen the panel; is-closed wins until focus leaves */
.site-header .nav-item.is-closed>.nav-sub{display:none;}
.site-header .nav-item.is-closed .nav-sub-toggle svg{transform:none;}
.site-header .nav-sub li{margin:0;}
.site-header .nav-links .nav-sub a{display:block;font-size:15px;font-weight:700;line-height:1.3;padding:10px 12px;border-radius:10px;color:var(--ds-color-navy,#23375A);white-space:nowrap;}
.site-header .nav-links .nav-sub a:hover,.site-header .nav-links .nav-sub a:focus-visible{background:var(--ds-color-buff,#F4EFE9);color:var(--ds-color-teal,#1E6C82);}
.site-header .nav-links .nav-sub a.active{color:var(--ds-color-mulberry,#835263);}
.site-header .nav-links .nav-sub a.nav-sub-all{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ds-color-mulberry,#835263);padding:8px 12px 6px;margin-bottom:4px;border-bottom:1px solid var(--ds-color-border-faint,rgba(35,55,90,.06));border-radius:0;}
.site-header .nav-links .nav-sub a.nav-sub-all:hover{background:none;color:var(--ds-color-teal,#1E6C82);}

/* Mobile drawer with the child pages grouped under their section */
.site-menu__group{padding:0 0 6px;border-bottom:1px solid var(--ds-color-border-faint,rgba(35,55,90,.06));}
.site-menu__links .site-menu__group>a{border-bottom:0;font-weight:800;}
.site-menu__sub{list-style:none;margin:0 0 8px;padding:0 0 0 16px;display:grid;gap:0;}
.site-menu__sub li{margin:0;}
.site-menu__links .site-menu__sub a{font-size:16px;font-weight:700;padding:9px 0;min-height:40px;border-bottom:0;color:var(--ds-color-navy,#23375A);opacity:.82;}
.site-menu__links .site-menu__sub a:hover,.site-menu__links .site-menu__sub a.active{opacity:1;color:var(--ds-color-teal,#1E6C82);}

/* Footer: a fifth column for About; the contact heading links to the contact page */
.fl-ds-page .site-footer .wrap{grid-template-columns:1.3fr 1fr 1fr 1fr 1.1fr;gap:36px;}
.site-footer h5 a{color:inherit;}
.site-footer h5 a:hover{color:var(--ds-color-buttercup,#FFDC50);}
@media (max-width:1000px){.fl-ds-page .site-footer .wrap{grid-template-columns:1fr 1fr 1fr;}.site-footer .footer-brand{grid-column:1/-1;}}
@media (max-width:640px){.fl-ds-page .site-footer .wrap{grid-template-columns:1fr 1fr;}}
@media (max-width:460px){.fl-ds-page .site-footer .wrap{grid-template-columns:1fr;}}

/* CTA records (features/sidebar-cta.php): colour variants on the design's
   .sb-contact card and .row-cta-band. Mulberry is the design default and
   needs no modifier. The design system emits its rules as .fl-ds-page .x,
   so these carry `body` and the doubled class to outrank them. */
body .sb-contact .btn{width:100%;justify-content:center;}
body .sb-contact.sb-contact--teal{background:var(--ds-color-teal,#1E6C82);}
body .sb-contact.sb-contact--navy{background:var(--ds-color-navy,#23375A);}
body .sb-contact.sb-contact--buff,body .sb-contact.sb-contact--mint{color:var(--ds-color-navy,#23375A);}
body .sb-contact.sb-contact--buff{background:var(--ds-color-buff,#F4EFE9);}
body .sb-contact.sb-contact--mint{background:var(--ds-color-mint,#D2F0F0);}
body .sb-contact.sb-contact--buff::after,body .sb-contact.sb-contact--mint::after{background:rgba(35,55,90,.05);}
body .sb-contact.sb-contact--buff .eyebrow,body .sb-contact.sb-contact--mint .eyebrow{color:var(--ds-color-mulberry,#835263);}
body .sb-contact.sb-contact--buff .sb-contact-title,body .sb-contact.sb-contact--mint .sb-contact-title,
body .sb-contact.sb-contact--buff h4,body .sb-contact.sb-contact--mint h4{color:var(--ds-color-navy,#23375A);}
body .sb-contact.sb-contact--buff p,body .sb-contact.sb-contact--mint p{color:var(--ds-color-text-muted,rgba(35,55,90,.78));}
body .sb-contact.sb-contact--buff .phone,body .sb-contact.sb-contact--mint .phone{color:var(--ds-color-mulberry,#835263);}
body .sb-contact.sb-contact--buff .hours,body .sb-contact.sb-contact--mint .hours{color:var(--ds-color-text-muted-soft,rgba(35,55,90,.72));}
body .sb-contact.sb-contact--buff .btn-buttercup,body .sb-contact.sb-contact--mint .btn-buttercup{color:var(--ds-color-mulberry,#835263);}
body .sb-contact.sb-contact--buff .btn-outline-white,body .sb-contact.sb-contact--mint .btn-outline-white{border-color:var(--ds-color-navy,#23375A);color:var(--ds-color-navy,#23375A);}
body .row-cta-band.row-cta-band--teal{background:var(--ds-color-teal,#1E6C82);}
body .row-cta-band.row-cta-band--navy{background:var(--ds-color-navy,#23375A);}
body .row-cta-band.row-cta-band--buff,body .row-cta-band.row-cta-band--mint{color:var(--ds-color-navy,#23375A);}
body .row-cta-band.row-cta-band--buff{background:var(--ds-color-buff,#F4EFE9);}
body .row-cta-band.row-cta-band--mint{background:var(--ds-color-mint,#D2F0F0);}
body .row-cta-band.row-cta-band--buff h2,body .row-cta-band.row-cta-band--mint h2,
body .row-cta-band.row-cta-band--buff p,body .row-cta-band.row-cta-band--mint p{color:var(--ds-color-navy,#23375A);}
body .row-cta-band.row-cta-band--buff .btn-outline-white,body .row-cta-band.row-cta-band--mint .btn-outline-white{border-color:var(--ds-color-navy,#23375A);color:var(--ds-color-navy,#23375A);}
body .row-cta-band.row-cta-band--buff .btn-buttercup,body .row-cta-band.row-cta-band--mint .btn-buttercup{color:var(--ds-color-mulberry,#835263);}

/* ---------------------------------------------------------------------------
 * Long unbreakable strings in editorial prose (phone widths).
 * Imported copy carries bare URLs inside list items, and phone numbers glued
 * to the preceding word with &nbsp;. Neither offers a break opportunity, so at
 * 375px they push the whole page sideways. break-word only breaks when the
 * line would otherwise overflow and, unlike anywhere, leaves intrinsic sizing
 * alone, so flex and grid tracks are unaffected. This fixes the symptom
 * without editing the client's words.
 * ------------------------------------------------------------------------ */
.article-body,.article-body p,.article-body li,.article-body dd,
.inner-content,.inner-content p,.inner-content li,.inner-content dd,
.editorial-text,.editorial-text p,.editorial-text li,.editorial-text dd,
.entry-content,.entry-content p,.entry-content li,.entry-content dd{overflow-wrap:break-word;}

/* ---------------------------------------------------------------------------
 * Full-bleed sections and the classic scrollbar.
 * The design system pulls a full-bleed Beaver Builder section out to the
 * viewport edges with margin-left/right: calc(50% - 50vw). vw units include
 * the scrollbar, so on any browser drawing a classic scrollbar (Windows and
 * Linux, and macOS set to always show them) each section sits half a
 * scrollbar proud of the viewport on both sides and the whole page scrolls
 * sideways by about 7px. --pb-sbw is the scrollbar's own width: 100% on the
 * root resolves against the viewport minus the scrollbar, 100vw includes it,
 * so the difference is exactly the gutter, and zero when there is none.
 * This belongs upstream in the design system; it lives here so it can be
 * lifted out in one piece once it does.
 * ------------------------------------------------------------------------ */
:root{--pb-sbw:calc(100vw - 100%);}
body [class*="fl-ds-custom-"]:not(.fl-ds-block [class*="fl-ds-custom-"]){
	margin-left:calc(50% - 50vw + (var(--pb-sbw) / 2));
	margin-right:calc(50% - 50vw + (var(--pb-sbw) / 2));
}

/* ---------------------------------------------------------------------------
 * Button labels on very narrow screens.
 * The design system's .btn is white-space:nowrap, which is right almost
 * everywhere. A long label such as 'Visit hamgreenhouse.org.uk' is then wider
 * than its card below about 340px and pushes the page sideways. Below 360px
 * the label may wrap instead. Two classes plus an element beat the runtime's
 * two-class base rule; 375px and up are untouched.
 * ------------------------------------------------------------------------ */
@media (max-width:360px){
	body .btn.btn{white-space:normal;overflow-wrap:break-word;}
}

/* ---------------------------------------------------------------------------
 * The closing CTA band's outline button went white on white on hover.
 * This one is the design system's own bug, not ours. It defines
 *   .fl-ds-page .btn-outline-white:hover  { color: navy; background: white }
 * and then, LATER in the same stylesheet and at exactly the same specificity,
 *   .fl-ds-page .row-cta-band .btn-outline-white { color: white }
 * Both are three classes, so the later one wins and the hover colour never
 * lands: the background turns white and the text stays white. It affects
 * every closing band on the site, and every Presa site on this design system.
 * One element more than the design system can reach. Worth pushing upstream.
 * ------------------------------------------------------------------------ */
body .row-cta-band .btn-outline-white:hover,
body .row-cta-band .btn-outline-white:focus-visible{
	background:var(--ds-color-white,#FEFEFE);
	color:var(--ds-color-navy,#23375A);
	border-color:var(--ds-color-white,#FEFEFE);
}


/* Contact: seven route cards in a three-column grid leaves the last one
   stranded on its own row. Let it take the full width instead. Safe at every
   size, because spanning every column of a single-column grid changes nothing. */
.contact-routes > .route-card:last-child {
	grid-column: 1 / -1;
}

/* The signposting band. It used to render from the service template, so its
   rules lived in pb-service.css; it now sits on Get Support only, which does
   not load that stylesheet, so the paragraph spacing was silently missing and
   the button sat against the sentence above it. Moved here, which loads
   everywhere. Harrison spotted it, 15 September 2026. */
.svc-signpost{text-align:center;max-width:62ch;margin:0 auto;}
.svc-signpost p{margin:0 0 22px;}
.svc-signpost p:last-child{margin-bottom:0;}

/* Contrast (WCAG 1.4.3), 30 September 2026.
   White on the brand orange is 2.31:1 against the 4.5:1 needed, so every
   button and link that carried text on or in orange is navy (11.8:1 with
   white). Orange stays for decoration: icon circles, timeline dots, accents.
   Paul's call. The two hard-coded orange buttons live in block CSS on Home
   and Get Support, hence the named selectors.
   Muted text used navy at 55 to 70% opacity (3.2 to 4.5:1); 78% is the
   design system's own --ds-color-text-muted and passes on white, buff and
   buttercup. Selectors carry body.fl-ds-page to beat the runtime's
   .fl-ds-page-prefixed copies. */
body.fl-ds-page .btn.btn-dawn{background:var(--ds-color-navy);color:var(--ds-color-white);}
body.fl-ds-page .btn.btn-dawn:hover{background:#1A2A45;}
body.fl-ds-page .btn.btn-outline-dawn{color:var(--ds-color-navy);border-color:var(--ds-color-navy);}
body.fl-ds-page .btn.btn-outline-dawn:hover{background:var(--ds-color-navy);color:var(--ds-color-white);}
body.fl-ds-page .how-we-can-help .pathway-card.pc-buttercup .btn,
body.fl-ds-page .hybrid-card.hc-4 .btn{background:var(--ds-color-navy);color:var(--ds-color-white);}
body.fl-ds-page .how-we-can-help .pathway-card.pc-buttercup .btn:hover,
body.fl-ds-page .hybrid-card.hc-4 .btn:hover{background:#1A2A45;}
body.fl-ds-page .photo-card .ghost-link,
body.fl-ds-page .photo-card .ghost-link .arr{color:var(--ds-color-navy);}

body.fl-ds-page .ways-row .row-label,
body.fl-ds-page .pb-wheel .pbw-hint,
body.fl-ds-page .toolbar-section .resources-count,
body.fl-ds-page .resources-section .resources-count,
body.fl-ds-page .photo-card .meta-row .meta-date,
body.fl-ds-page .featured-card .meta-row .meta-date,
body.fl-ds-page .row-timeline .t-step p{opacity:.78;}
body.fl-ds-page .site-footer .footer-bottom{color:rgba(254,254,254,.72);}
body.fl-ds-page .row-cta-band .cta-checklist h4,
body.fl-ds-page .row-cta-band .cta-checklist h3{color:var(--ds-color-white);}

/* Headings (WCAG 1.3.1), 30 September 2026.
   The design system's .sec-heading was a div of spans, so section titles
   were not headings at all and card h3s followed the page h1 directly.
   The spans now sit inside h2.sec-heading__title; this makes that h2
   transparent to styling so the two-line lockup looks exactly as before. */
body.fl-ds-page .sec-heading h2.sec-heading__title{margin:0;padding:0;border:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;display:block;position:static;max-width:none;}
body.fl-ds-page .sec-heading h2.sec-heading__title::before,
body.fl-ds-page .sec-heading h2.sec-heading__title::after{content:none;}
/* Two headings moved from h4 to h3 to follow the page's h2; same look. */
body.fl-ds-page .row-cta-band .cta-checklist h3{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--ds-color-white);margin:0 0 18px;}
body.fl-ds-page .row-timeline .t-step h3,
body.fl-ds-page .story-section .t-step h3{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:15px;line-height:1.25;letter-spacing:normal;color:var(--ds-color-navy);margin:0 0 6px;}
/* Footer column titles are h2 now (they were h5), styled as before. */
body.fl-ds-page .site-footer h2.footer-heading{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:15px;line-height:1.25;letter-spacing:normal;text-transform:none;color:var(--ds-color-white);margin:0 0 16px;}
body.fl-ds-page .site-footer h2.footer-heading a{color:inherit;}
body.fl-ds-page .site-footer h2.footer-heading a:hover{color:var(--ds-color-buttercup,#FFDC50);}
/* The resource hub's count line, missed by the contrast block above. */
body.fl-ds-page .pb-resources .resources-count{opacity:.78;}

/* About page follow-ups to the heading and contrast work: the story
   timeline there is .story-section rather than .row-timeline, and the
   leader cards move from h4 to h3 now that their section has an h2. */
body.fl-ds-page .story-section .t-step p{opacity:.78;}
body.fl-ds-page .leader-card h3{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:18px;line-height:1.25;letter-spacing:normal;color:var(--ds-color-navy);margin:0 0 4px;}

/* Keyboard focus (WCAG 2.4.7), from the manual pass on 30 September.
   Embedded maps and videos take focus inside their own frame, and the frame
   sits in a clipping box, so the ring goes on the box. The sessions search
   field set outline:0 and its replacement was a faint 18% teal ring. */
body.fl-ds-page .contact-map:focus-within,
body.fl-ds-page .media-embed:focus-within{outline:3px solid var(--ds-color-mulberry,#835263);outline-offset:3px;}
body.fl-ds-page .pbuk-toolbar .search-form:focus-within{outline:3px solid var(--ds-color-mulberry,#835263);outline-offset:3px;}

/* Support email under the phone number, in the sidebar card and the footer.
   Pre-launch feedback PRE-012, 12 October 2026. */
body.fl-ds-page .sb-contact .hours:has(+ .email){margin-bottom:4px;}
body.fl-ds-page .sb-contact .email{display:block;font-family:'Mackinac',Georgia,serif;font-size:15px;line-height:1.5;color:var(--ds-color-white,#FEFEFE);text-decoration:underline;text-underline-offset:3px;margin-bottom:20px;overflow-wrap:break-word;}
/* Fewer type sizes in the card (Paul, 13 Oct): body and email share one size, the phone sits just below the heading's. */
body.fl-ds-page .sb-contact p{font-size:15px;line-height:1.55;}
body.fl-ds-page .sb-contact .phone{font-size:20px;margin-bottom:4px;}
body.fl-ds-page .site-footer .footer-contact .email{margin-top:6px;}
body.fl-ds-page .site-footer .footer-contact .email a{overflow-wrap:break-word;}

/* Anchors for the Get support routes and the self-help wheel link (PRE-008, PRE-039). */
#support-for-every-step,#whole-person-model,#choose-your-pathway{scroll-margin-top:110px;}

/* Hero leads: no single word left on the last line. */
body.fl-ds-page .hero-lead{text-wrap:pretty;}

/* ---------- One button rule (Paul, 13 October 2026) ----------
   On a light background: the primary button is solid teal, the secondary is a
   teal outline. On a dark band (mulberry, navy): buttercup primary and white
   outline secondary, which the design system already does. The header's
   Donate keeps its plum. Before this, light backgrounds carried mulberry,
   plum, lavender, navy and orange buttons depending on the block. */
body.fl-ds-page .btn.btn-mulberry.btn,
body.fl-ds-page .btn.btn-dawn.btn,
body.fl-ds-page .btn.btn-navy.btn,
body.fl-ds-page .pathway-card-inner .btn.btn.btn,
body.fl-ds-page .hybrid-card-inner .btn.btn.btn,
body.fl-ds-page .blossom-text .btn.btn-plum.btn,
body.fl-ds-page .hgh-text .btn.btn-plum.btn,
body.fl-ds-page .route-card .btn.btn-plum.btn,
body.fl-ds-page .feat-body .btn.btn-dawn.btn,
body.fl-ds-page .gform_wrapper.gform_wrapper .gform_button.gform_button,
body.fl-ds-page .inner-section .wp-block-button:not(.is-style-outline):not(.is-style-pb-cta *) > .wp-block-button__link.wp-block-button__link{
  background:var(--ds-color-teal,#1E6C82);color:var(--ds-color-white,#FEFEFE);border-color:var(--ds-color-teal,#1E6C82);
}
body.fl-ds-page .btn.btn-mulberry.btn:hover,
body.fl-ds-page .btn.btn-dawn.btn:hover,
body.fl-ds-page .btn.btn-navy.btn:hover,
body.fl-ds-page .pathway-card-inner .btn.btn.btn:hover,
body.fl-ds-page .hybrid-card-inner .btn.btn.btn:hover,
body.fl-ds-page .blossom-text .btn.btn-plum.btn:hover,
body.fl-ds-page .hgh-text .btn.btn-plum.btn:hover,
body.fl-ds-page .route-card .btn.btn-plum.btn:hover,
body.fl-ds-page .feat-body .btn.btn-dawn.btn:hover,
body.fl-ds-page .gform_wrapper.gform_wrapper .gform_button.gform_button:hover,
body.fl-ds-page .inner-section .wp-block-button:not(.is-style-outline):not(.is-style-pb-cta *) > .wp-block-button__link.wp-block-button__link:hover{
  background:var(--ds-color-teal-hover,#16566A);border-color:var(--ds-color-teal-hover,#16566A);color:var(--ds-color-white,#FEFEFE);
}
body.fl-ds-page .btn.btn-outline-mulberry.btn,
body.fl-ds-page .btn.btn-outline-navy.btn,
body.fl-ds-page .btn.btn-outline-dawn.btn{
  background:transparent;color:var(--ds-color-teal,#1E6C82);border-color:var(--ds-color-teal,#1E6C82);
}
body.fl-ds-page .btn.btn-outline-mulberry.btn:hover,
body.fl-ds-page .btn.btn-outline-navy.btn:hover,
body.fl-ds-page .btn.btn-outline-dawn.btn:hover{
  background:var(--ds-color-teal,#1E6C82);color:var(--ds-color-white,#FEFEFE);border-color:var(--ds-color-teal,#1E6C82);
}

/* News: the Tell us your story panel sits close under the grid, on buff,
   with the site's teal button (Paul, 13 Oct). */
body.fl-ds-page .pb-news-prose{padding-top:24px;}
body.fl-ds-page .article-body .wp-block-group.is-style-pb-soft{background:var(--ds-color-buff,#F4EFE9);border-radius:20px;padding:36px 40px;}
body.fl-ds-page .article-body .is-style-pb-soft h2{margin-top:0;}
body.fl-ds-page .article-body .is-style-pb-soft .wp-block-buttons{margin-top:20px;}
body.fl-ds-page .article-body .is-style-pb-soft .wp-block-button__link.wp-block-button__link{display:inline-flex;background:var(--ds-color-teal,#1E6C82);color:var(--ds-color-white,#FEFEFE);border-radius:999px;padding:13px 26px;font-family:var(--ds-font-heading,'Flink',system-ui,Arial,sans-serif);font-weight:800;font-size:15px;text-decoration:none;}
body.fl-ds-page .article-body .is-style-pb-soft .wp-block-button__link.wp-block-button__link:hover{background:var(--ds-color-teal-hover,#175566);}
@media (max-width:600px){body.fl-ds-page .article-body .wp-block-group.is-style-pb-soft{padding:26px 22px;}}

/* Not sure where to start? strip: the pieces of the sentence sat 10px apart,
   which read as gaps around the phone number. Word spacing instead
   (audit, 20 October). */
body.fl-ds-page .contact-strip .contact-text{column-gap:.3em;}
body.fl-ds-page .contact-strip .contact-text > strong{margin-right:.35em;}

/* About, Meet the people at the helm: a two-line job title ran into the
   card's rounded, clipped bottom corner and lost its first letter. */
body.fl-ds-page .leader-card{padding-bottom:24px;}

/* Strategic partnerships: the partner logo row (audit, 20 October). */
body.fl-ds-page .pb-logo-row{gap:48px 64px;align-items:center;margin:32px 0 8px;}
body.fl-ds-page .pb-logo-row .wp-block-image{margin:0;}
body.fl-ds-page .pb-logo-row img{height:64px;width:auto;max-width:240px;object-fit:contain;border-radius:0;}

/* Phones: the hero's mobile padding (36px) is less than the overlaid
   header (88px), so the logo sat on top of the page title on Home, Get
   support, Get involved and About (audit, 20 October: the logo banner at
   the top of the homepage). Clear the header on pages that overlay it. */
@media (max-width:780px){
  body:has(.site-header--overlay) .hero:not(.hero--page):not(.hero--directory):not(.hero--editorial){padding-top:112px !important;}
}

/* Get support: the intro under Explore the four areas (audit, 20 October). */
body.fl-ds-page .pb-gs-feature .sec-heading .subcopy{max-width:680px;margin:16px auto 0;text-align:center;}