/* Banner theme (styled after sticklepathparish.gov.uk) */
:root {
  --brand: #054a29;        /* white on it is 10:1 */
  --brand-dark: #03331c;
  --ink: #182825;          /* footer / title box */
  --link: #05582f;
  --panel: #f4f4f4;
}
body.banner-theme { background: var(--panel); }
.bn-header { background: var(--brand); color: #fff; }
.bn-header-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0 1.5rem; padding-right: 16px; }
/* the white curved panel behind the logo */
.bn-brand {
  display: flex; align-items: center; gap: .75rem; background: #fff; color: var(--brand); text-decoration: none;
  padding: .75rem 4.5rem .75rem 16px; border-bottom-right-radius: 100% 140%; font-weight: 700; font-size: 1.375rem; line-height: 1.15;
}
.bn-brand:visited { color: var(--brand); }
.bn-brand img { width: 72px; height: 72px; border-radius: 50%; }
.bn-brand-text { max-width: 9em; }
.bn-brand:focus-visible { background: var(--focus); color: var(--text); box-shadow: inset 0 -4px 0 var(--text); }
.bn-nav { display: flex; align-items: center; }
.bn-nav ul { list-style: none; margin: 0; padding: .5rem 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.25rem; }
.bn-nav a { color: #fff; text-decoration: none; font-weight: 600; display: inline-block; padding: .35rem 0; border-bottom: 3px solid transparent; }
.bn-nav a:visited { color: #fff; }
.bn-nav a:hover, .bn-nav a[aria-current="page"], .bn-nav a.in-section { border-bottom-color: #fff; }
.bn-nav a:focus-visible { color: var(--text); background: var(--focus); box-shadow: 0 4px 0 var(--text); border-bottom-color: transparent; }

.bn-hero { background: var(--ink) url(/assets/site/header.jpg) center 45% / cover no-repeat; min-height: 170px; display: flex; align-items: flex-end; }
.bn-hero-home { min-height: 320px; }
.bn-hero-box { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 16px; }
.bn-hero-box > * { background: var(--ink); color: #fff; }
.bn-hero-box h1 { display: inline-block; margin: 0; padding: 1rem 1.5rem; font-size: 2rem; max-width: 22em; }
.bn-hero-box .breadcrumb { display: inline-block; padding: .4rem 1.5rem 0; }
.bn-hero-box .breadcrumb ol { font-size: .9375rem; }
.bn-hero-box .breadcrumb + h1 { display: block; width: fit-content; }
.bn-hero-box .breadcrumb a, .bn-hero-box .breadcrumb a:visited { color: #fff; }
.bn-hero-box .breadcrumb li + li::before { color: #fff; }
.bn-hero-box .breadcrumb a:focus-visible { color: var(--text); }
.bn-tagline { display: block; width: fit-content; margin: 0; padding: 0 1.5rem 1rem; font-size: 1.1875rem; }

.bn-page { max-width: 1240px; margin: 0 auto; padding: 0 16px 3rem; }
.bn-panel { background: #fff; padding: 2rem 2rem 2.5rem; }
.bn-panel > h2:first-child { margin-top: 0; }

/* grey link tiles with a chevron, like Sticklepath's */
.bn-tiles { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; max-width: none; }
.bn-tiles a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .5rem 0 .5rem 1rem;
  background: var(--panel); color: var(--text); text-decoration: none; font-weight: 600; border-left: 4px solid var(--brand);
}
.bn-tiles a::after { content: "›"; flex: 0 0 2.75rem; align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--brand); border-left: 1px solid #d3d3d3; }
.bn-tiles a:hover { background: #e8ece9; text-decoration: underline; }
.bn-tiles a:visited { color: var(--text); }
.card { background: var(--panel); border-top-color: var(--brand); }
.bn-intro { margin-top: 2rem; }

.bn-footer { background: var(--ink); color: #fff; padding: 2rem 0; font-size: 1rem; }
.bn-footer-inner { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; gap: 2rem; align-items: flex-start; }
.bn-footer-logo { border-radius: 50%; flex: 0 0 80px; }
.bn-footer a, .bn-footer a:visited { color: #fff; }
.bn-footer a:focus-visible { color: var(--text); }
.bn-footer .footer-links { text-transform: uppercase; font-weight: 700; font-size: .875rem; letter-spacing: .03em; }

.menu-toggle { display: none; }
@media (max-width: 860px) {
  .bn-header-inner { padding-right: 0; }
  .bn-brand { padding-right: 3rem; font-size: 1.125rem; }
  .bn-brand img { width: 56px; height: 56px; }
  .bn-nav { width: 100%; display: block; }
  .menu-toggle { display: block; width: 100%; text-align: left; font: inherit; font-weight: 700; color: #fff; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .3); padding: .75rem 16px; cursor: pointer; }
  .menu-toggle::after { content: " ▾"; }
  .menu-toggle[aria-expanded="true"]::after { content: " ▴"; }
  .menu-toggle:focus-visible { background: var(--focus); color: var(--text); }
  .bn-nav ul { flex-direction: column; gap: 0; padding: 0 16px .5rem; }
  .js .bn-nav ul:not(.is-open) { display: none; }
  .bn-hero { min-height: 110px; }
  .bn-hero-home { min-height: 180px; }
  .bn-hero-box { padding: 0; }
  .bn-hero-box h1 { font-size: 1.5rem; padding: .75rem 1rem; }
  .bn-page { padding: 0 0 2rem; }
  .bn-panel { padding: 1.25rem 16px 2rem; }
  .bn-footer-inner { flex-direction: column; }
}
@media print {
  .bn-nav, .bn-hero { display: none; }
  .bn-header, .bn-footer { background: none; color: #000; }
}