@charset "UTF-8";
/*!
Theme Name: historicnorthampton
Theme URI: http://underscores.me/
Author: Nora Brown
Author URI: https://norabrowndesign.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: historicnorthampton
*/
/*
 * Note on BREAKPOINTS
 * Wordpress's column breakpoint is at 782px: Greater than or equal to 782 and you have columns.
 * The nav breakpoint is 57rem: Greater than 57rem and you have the desktop nav.
*/
:root {
  --wp--preset--color--dark-green: var(--wp--preset--color--blue);
  --wp--preset--color--charcoal: var(--wp--preset--color--black);
  --wp--preset--color--burgundy: var(--wp--preset--color--brown);
  --wp--preset--color--rose: var(--wp--preset--color--brown);
  --color-turquoise: var(--wp--preset--color--turquoise);
  --color-blue:	var(--wp--preset--color--blue);
  --color-gold: var(--wp--preset--color--gold);
  --color-pale-gold: var(--wp--preset--color--pale-gold);
  --color-charcoal: var(--wp--preset--color--charcoal);
  --color-dark-green: var(--wp--preset--color--dark-green);
  --color-brown: var(--wp--preset--color--brown);
  --color-burgundy: var(--wp--preset--color--burgundy);
  --color-rose: var(--wp--preset--color--rose);
  --color-champagne: var(--wp--preset--color--champagne);
  --color-offwhite: var(--wp--preset--color--offwhite);
  --color-white: var(--wp--preset--color--white);
  --color-light-gray: var(--wp--preset--color--light-gray);
  --color-dark-gray: var(--wp--preset--color--dark-gray);
  --color-black: var(--wp--preset--color--black);
  --color-text: var(--color-charcoal);
  --color-text-on-dark: var(--color-offwhite);
  --color-site-bg: #E2E0DE;
  --color-content-bg_alt: var(--color-light-gray);
  --color-content-bg: var(--color-white);
  --color-border_faint: #FFF2;
  --color-border_rule: var(--color-pale-gold);
  --color-menu-bg: color-mix(in oklab, var(--color-turquoise), rgba(0, 0, 0, 0.5) 35%);
  --logo-width_desktop: 200px;
  --logo-aspect-ratio: 14 / 5;
  /* WP outputs:
    --wp--style--global--content-size: // contentSize in theme.json
     --wp--style--global--wide-size: // wideSize in theme.json
  */
  --size-primary-max-width: var(--wp--style--global--wide-size);
  --size-primary-content-width: var(--wp--style--global--content-size);
  --space-xs: var(--wp--preset--spacing--10);
  /* this is the default vertical gap ('blockGap') between elements in 'is-layout-flow'
     also the root padding width
  	 on desktop root padding is x2  */
  --space-sm: var(--wp--preset--spacing--20);
  --space-md: var(--wp--preset--spacing--30);
  --space-md-lg: var(--wp--preset--spacing--40); /* this is the default horizontal gap between columns, .is-layout-grid items */
  --space-col-gap: var(--wp--preset--spacing--40);
  --space-lg: var(--wp--preset--spacing--50);
  --space-xl: var(--wp--preset--spacing--60);
  --space-global-padding: var(--wp--preset--spacing--20); /* TODO this is unused -- should we be using it in some places? */
  --wp--style--gallery-gap-default: var(--space-sm);
  --header-height_mobile: 4rem;
  --transition-definition: 300ms ease-in-out;
  --box-shadow: var(--wp--preset--shadow--natural);
  --box-shadow_subtle: var(--wp--preset--shadow--subtle);
  --border-radius-sm: 3px;
  --border-radius: .5rem;
  --border-radius-lg: 1rem;
  --type-font-heading: var(--wp--preset--font-family--heading);
  --type-font-body: var(--wp--preset--font-family--body);
  --border-width-thick: 4px;
  --border-width-thin: 1px;
  --border-thick-rule: var(--border-width-thick) solid var(--color-pale-gold);
  --border-thin-rule: var(--border-width-thin) solid var(--color-pale-gold);
}

@media screen and (width > 57rem) {
  :root {
    --header-height_mobile: 0rem;
  }
}
/* increase global root padding on desktop */
@media screen and (width > 782px) {
  body {
    --wp--style--root--padding-right: calc(4 * var(--wp--preset--spacing--20));
    --wp--style--root--padding-left: calc(4 * var(--wp--preset--spacing--20));
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css 
 *  edited to what I think are still useful, removing fixes for IE10 and
 * elements we are unlikliely to use
 */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  height: 100%;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
  cursor: help;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: max(0.6em, 12px);
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-weight: normal;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.8em;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* ADDITIONS */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  interpolate-size: allow-keywords;
  height: 100%;
}

/* Utilities
   ========================================================================== */
/*
/* Text meant only for screen readers.
 * All the usuall classes
 * @link https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
 */
.screen-reader-text:not(:focus):not(:active),
.visually-hidden:not(:focus):not(:active),
.sr-only:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link:focus {
  background-color: #f1f1f1;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Hidden SVG for <use> */
svg[hidden] {
  display: none;
  position: absolute;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

iframe {
  display: block;
}

img {
  height: auto;
  max-width: 100%;
}

table {
  width: 100%;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media screen and (width < 782px) {
  html {
    /* accounts for mobile header and/or fixed TOC */
    scroll-padding-top: calc(var(--header-height_mobile) + 3em);
  }
}
body {
  background: var(--color-site-bg);
  color: var(--color-text);
}

/* Typography
--------------------------------------------- */
html {
  font-size: 112.5%; /* 1rem = 18px */
  line-height: 1.5;
}

@container (width < 30vw) {
  h2 {
    font-size: 1.25em;
  }
}
article {
  container-type: inline-size;
}

@container (width > 782px) {
  h1 {
    font-size: var(--wp--preset--font-size--large);
  }
}
@media screen and (width > 782px) {
  html {
    font-size: 125%; /* 1rem = 20px */
  }
  .wp-block-cover h1 {
    font-size: var(--wp--preset--font-size--x-large);
  }
  /* 
  This seems to make things look weird more often than it helps
  *:is(h1, h2, h3, h4, h5, h6) {
  	text-wrap-style: balance
  }
  	*/
}
/* applying spacing in theme.json doesn't work; is overridden by default WP block gap */
:is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* override a default Wordpress style */
:is(h1, h2, h3, h4, h5, h6).has-background {
  padding: 1rem;
}

/* for plain headings, center if single-line */
article > header > h1 {
  inline-size: fit-content;
  margin-inline: auto;
}

:root :where(.is-layout-constrained) > *:is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0.75em;
  margin-block-end: 0;
}

figure + :is(h1, h2, h3, h4, h5, h6) {
  margin-block: 0.2em 0.4em;
}

:is(h1, h2, h3, h4, h5, h6, p) + p:not([class]) {
  margin-block-start: min(4cqi, var(--space-sm)); /* this is the layout-flow block gap by default */
}

li + li:not([class]):not([role]):not(:has(img)) {
  margin-block-start: 0.5em;
}

/* TODO Make this part of an image style, not automatic! */
:root :where(.wp-block-image img[src*=png]) {
  box-shadow: none;
  filter: drop-shadow(var(--wp--preset--shadow--subtle));
}

.site-main figcaption {
  /* try to gently overcome the '.wp-block-image :where(figcaption)' WP style */
  margin-bottom: 0;
}

small {
  font-size: var(--wp--preset--font-size--small);
}

/* Links
--------------------------------------------- */
a {
  overflow-wrap: anywhere; /* keep long urls from causing overflow */
}

a:not([class]) {
  color: var(--link-color, var(--color-blue));
  -webkit-text-decoration: solid underline currentColor 1px;
          text-decoration: solid underline currentColor 1px;
  text-underline-offset: 2px;
  transition: color 200ms, text-underline-offset 200ms, text-decoration-thickness 200ms;
}

a:not([class]):visited {
  text-decoration-color: color-mix(in oklab, var(--link-color, var(--color-blue)), transparent var(--link-dim, 50%));
}

a:not([class]):is(:hover, :focus-visible) {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

a:not([class]):focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 4px;
  border-radius: var(--border-radius-sm);
}

a:not([class]):active {
  text-decoration-color: var(--color-turquoise);
  text-underline-offset: 1.5px;
}

/* External Links */
@media screen {
  a[target=_blank] {
    padding-right: 1em;
    background-repeat: no-repeat;
    background-size: auto 0.45lh;
    background-position: 100% 45%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:%23003d73;fill-opacity:.8' d='M12 10c-.55 0-1 .45-1 1v3H2V5h3c.55 0 1-.45 1-1s-.45-1-1-1H2C.895 3 0 3.895 0 5v9c0 1.105.895 2 2 2h9c1.105 0 2-.895 2-2v-3c0-.555-.445-1-1-1Zm3.25-10H11a.99.99 0 0 0-.922.617.998.998 0 0 0 .215 1.09L11.586 3 5.293 9.293a1 1 0 1 0 1.414 1.414L13 4.414l1.293 1.293A.999.999 0 0 0 16 5V.75a.75.75 0 0 0-.75-.75Zm0 0'/%3E%3C/svg%3E");
  }
  a.wp-block-button__link[target=_blank] {
    padding-right: 2em;
    background-position: calc(100% - 1em) 45%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:%23fff;' d='M12 10c-.55 0-1 .45-1 1v3H2V5h3c.55 0 1-.45 1-1s-.45-1-1-1H2C.895 3 0 3.895 0 5v9c0 1.105.895 2 2 2h9c1.105 0 2-.895 2-2v-3c0-.555-.445-1-1-1Zm3.25-10H11a.99.99 0 0 0-.922.617.998.998 0 0 0 .215 1.09L11.586 3 5.293 9.293a1 1 0 1 0 1.414 1.414L13 4.414l1.293 1.293A.999.999 0 0 0 16 5V.75a.75.75 0 0 0-.75-.75Zm0 0'/%3E%3C/svg%3E");
  }
}
.has-white-color a {
  --link-color: var(--color-text-on-dark);
}

button:not([aria-controls]):not([aria-haspopup]):not(.wp-block-accordion-heading__toggle),
.button {
  padding: var(--space-xs) var(--space-sm);
  border-radius: 3px;
  border-width: 0;
  border-style: solid;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-definition);
}

:is(button, .button):has(svg) {
  display: flex;
  justify-content: center;
  gap: 2px;
  line-height: 24px;
}

input:not([type=submit]) {
  color: var(--color-text);
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: var(--space-xs);
}

figure {
  margin: 0;
}

blockquote cite {
  font-family: var(--type-font-heading);
}

blockquote cite::before {
  content: "—";
}

mark {
  color: inherit;
}

/* there is also a no-markers-list.json but styles aren't output unless Wordpress knows about it */
:is(ol, ul).no-markers {
  list-style-type: none;
  padding-inline-start: 0;
}

/* DEFINITION LISTS */
dd + dt {
  margin-block-start: 0.5em;
}

dd {
  margin-inline-start: 1em;
}

dt {
  break-after: avoid;
}

dd, dt {
  break-inside: avoid;
}

.site-wrapper {
  display: grid;
  min-height: 100%;
  /* with fixed <header> on mobile there are only two grid rows */
  grid-template-rows: 1fr auto;
  padding-top: var(--header-height_mobile);
  background: var(--color-content-bg);
}

@media screen and (width > 57rem) {
  .site-wrapper {
    grid-template-rows: auto 1fr auto;
    padding-top: 0;
    max-width: var(--size-primary-max-width);
    margin-inline: auto;
  }
  .site-header {
    grid-column: 1/-1;
    grid-row: 1/2;
  }
  .site-main:has(article > .wp-block-cover.cover-slideshow:first-child) {
    grid-column: 1/-1;
    grid-row: 1/3;
  }
  article > .wp-block-cover.alignfull:first-child {
    min-height: 90vh;
  }
}
@media screen and (width < 57rem) {
  article > .wp-block-cover.alignfull:first-child .wp-block-cover__background {
    background-color: transparent;
    background-image: linear-gradient(to top, black, transparent 50%);
    opacity: 1;
  }
  article > .wp-block-cover.alignfull:first-child .wp-block-group {
    margin-bottom: 0 !important;
  }
}
/*--------------------------------------------------------------
# Site Frame - HEADER
--------------------------------------------------------------*/
.site-header {
  background-color: var(--color-turquoise);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 8;
  transition: height var(--transition-definition);
  box-shadow: var(--box-shadow_subtle);
  border-bottom: 0.5px solid #e4e4e4;
  --nav-underline-thickness: 4px;
}

.site-header--layout,
.site-banner--layout {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-col-gap);
}

.site-header--layout {
  height: var(--header-height_mobile);
  font-family: var(--type-font-heading);
}

.site-banner--layout {
  padding: var(--space-xs);
  justify-content: center;
}

.site-banner .info {
  font-size: 0.77777em;
  margin-left: auto;
  text-align: right;
}

.site-banner--layout .info span {
  margin-inline: 1em 0.6em;
  color: transparent;
  border-left: 1px solid var(--color-border_faint);
}

.mobile-drawer {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mobile-drawer .info, .mobile-drawer .announcement {
  font-family: var(--type-font-body);
}
.mobile-drawer .info {
  text-align: right;
}
.mobile-drawer nav {
  margin-inline: var(--space-sm);
}

.site-banner {
  background-color: var(--color-blue);
  color: var(--color-text-on-dark);
  --link-color: var(--color-text-on-dark);
  --link-dim: 0%;
}

.site-banner p {
  margin-block: 0;
}

@media screen and (width < 57rem) {
  .site-banner {
    padding: var(--space-sm);
  }
  p.announcement {
    border-bottom: 1px solid var(--color-border_faint);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
}
.site-header--logo {
  background: #fff;
  padding-inline: var(--space-md);
  place-content: center;
}

#desktop-nav {
  align-self: end;
  color: var(--color-text-on-dark);
}

.site-title {
  display: block;
  width: calc(var(--logo-width_desktop) * 0.8);
  aspect-ratio: var(--logo-aspect-ratio);
  background-image: url(assets/img/historic-northampton.svg);
  background-size: contain;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

@media screen and (width > 57rem) {
  .site-header--layout {
    height: auto;
    justify-content: start;
  }
  .site-header {
    background-color: var(--color-menu-bg);
    backdrop-filter: brightness(0.5);
    position: static;
    height: auto;
    box-shadow: none;
    border-bottom: 0;
  }
  .site-title {
    width: var(--logo-width_desktop);
  }
  .site-header--logo {
    padding: var(--space-sm) var(--space-md);
  }
}
/* Navigation
--------------------------------------------- */
/* all menus */
ul[class*=menu] {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul[class*=menu] :is(a, button) {
  text-decoration: none;
  border: 0;
  border-bottom: var(--nav-underline-thickness) solid transparent;
  padding: var(--space-xs) var(--space-sm);
  background-color: transparent;
  transition: background-color var(--transition-definition);
  width: 100%;
}

ul[class*=menu] .nav-button > :is(a, button) {
  background-color: var(--color-blue);
  color: var(--color-text-on-dark);
}

#mobile-nav ul ul {
  margin-left: var(--space-sm);
}

#desktop-nav,
.site-header > .site-banner {
  display: none;
}

#mobile-nav-toggle {
  border: 0;
  background: none;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-on-dark);
  text-transform: uppercase;
  padding: 0.25em 0.5em;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

#mobile-nav-toggle::after {
  content: "";
  width: 1.4em;
  height: 1.2em;
  background: currentColor;
  background: linear-gradient(currentColor 30%, transparent 0) top/100% 40% repeat-y;
}

#mobile-nav-toggle:has(+ #mobile-nav:popover-open)::after {
  background-image: linear-gradient(45deg, transparent calc(50% - 2px), currentColor calc(50% - 2px), currentColor calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(-45deg, transparent calc(50% - 2px), currentColor calc(50% - 2px), currentColor calc(50% + 2px), transparent calc(50% + 2px));
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (width > 57rem) {
  #desktop-nav,
  .site-header > .site-banner {
    display: block;
  }
  #mobile-nav-toggle,
  #mobile-nav {
    display: none;
  }
  .click-menu {
    display: flex;
    gap: 0.25em;
    font-size: 1.111111em;
    flex-wrap: wrap;
    justify-content: center;
  }
  #desktop-nav .nav-button {
    margin-inline-start: 0.8em;
  }
}
/* SEARCH Nav item */
.site-header a[href="/?s="],
.site-header button[popovertarget=nav-search] {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 14H9.29L9.57 13.73C8.59 12.59 8 11.11 8 9.5C8 5.91 10.91 3 14.5 3C18.09 3 21 5.91 21 9.5C21 13.09 18.09 16 14.5 16C12.89 16 11.41 15.41 10.27 14.43L10 14.71V15.5L5 20.49L3.51 19L8.5 14V14ZM14.5 14C16.99 14 19 11.99 19 9.5C19 7.01 16.99 5 14.5 5C12.01 5 10 7.01 10 9.5C10 11.99 12.01 14 14.5 14Z' fill='%23FFFFFF' /%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

#mobile-nav li:has(a[href="/?s="]) {
  /* search form itself is shown in the mobile menu */
  display: none;
}

#mobile-nav .search-form {
  margin-block: var(--space-md);
}

/* Search popover */
#nav-search {
  border: 0;
  padding: 1em;
  border-radius: 3px;
  min-width: 50vw;
  inset-block-start: -20vh;
}

/* search form styles */
.search-form button {
  background-color: var(--color-blue);
  color: var(--color-text-on-dark);
}

.search-form svg {
  fill: var(--color-text-on-dark);
}

.search-form button:hover {
  background-color: color-mix(in oklab, var(--link-color, var(--color-blue)), #000 var(--link-dim, 10%));
}

/* BEGIN CLICKY MENU
 * https://codepen.io/mrwweb/pen/pXqKZO
 */
.click-menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  visibility: hidden;
}

.click-menu > li {
  position: relative;
}

.click-menu > li:last-child ul {
  left: auto;
  right: 0;
}

/**
 * No-JS fallback
 *
 * Triggers menus on hover rather than click. Supports keyboard navigation in modern browsers.
 */
.no-js .click-menu li:hover > ul {
  visibility: visible;
}

.no-js .click-menu li:focus-within > ul { /*[2]*/
  visibility: visible;
}

/**
 * Open/Close Menu Behavior with JS
 */
.click-menu ul[aria-hidden=false] {
  visibility: visible;
}

/* Prevent offscreen-submenus */
.click-menu .sub-menu--right {
  left: auto !important;
  right: 0 !important;
}

/* General Link & Button Styles */
.click-menu :is(a, button),
.click-menu :is(a, button):visited {
  color: inherit;
}

.click-menu :is(a, button):is(:hover, :focus-visible) {
  color: inherit;
  background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
}

.click-menu :is(a, button):focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: -0.125em;
}

/* Top Level Items makes all nav interactive elements the same height */
#desktop-nav ul > li {
  flex: 0 1 auto;
  display: flex;
  justify-content: stretch;
}

/* only top-level items */
.click-menu > li > :is(a, button) {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  /* NAV ITEM TYPOGRAPHY
  text-transform: uppercase;
  letter-spacing: 1px;
  */
}

@media screen and (width > 57rem) {
  .click-menu > li > :is(a, button) {
    justify-content: center;
  }
}
/* Submenu Styles */
@media screen and (width > 57rem) {
  .click-menu ul {
    box-shadow: var(--box-shadow_subtle);
    opacity: 0.5;
    background-color: #3899A1; /* the non-transparent equivalent of the main nav bg */
  }
}
/* Responsive Submenu Behavior */
.click-menu ul[aria-hidden=false] {
  position: static;
  flex: 0 0 auto;
}

@media screen and (width > 57rem) {
  .click-menu ul {
    min-width: 100%;
  }
  .click-menu ul[aria-hidden=false] {
    position: absolute;
    opacity: 1;
  }
}
/* Submenu Links */
.click-menu ul a {
  display: block;
}

@media screen and (width > 57rem) {
  .click-menu ul a {
    white-space: nowrap;
  }
}
/* END CLICKY MENU */
/* arrow */
.click-menu [aria-expanded]::after {
  content: "";
  display: block;
  width: 0.5em;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-definition);
}

.click-menu [aria-expanded=true]::after {
  transform: rotate(-45deg) translateY(-2px);
}

.click-menu button[aria-expanded=true],
.click-menu > li:has(a[aria-current=page]) button,
.click-menu a[aria-current=page],
.click-menu .is-parent-of-current-page > a {
  border-bottom: var(--nav-underline-thickness) solid #045093; /* variation on -color-blue */
}

#mobile-nav {
  border: none;
  height: calc(100dvh - var(--header-height_mobile));
  inset: var(--header-height_mobile) 0 0 20%;
  width: 80%;
  background-color: var(--color-champagne);
  transform: translateX(100%);
  transition: transform 500ms ease-in-out, overlay 500ms allow-discrete, display 500ms allow-discrete;
}

#mobile-nav::backdrop {
  inset: var(--header-height_mobile) 0 0 0;
}

body:has(#mobile-nav:popover-open) {
  overflow: hidden;
}

#mobile-nav:popover-open {
  transform: translateX(0);
}

/* Needs to be after the previous [popover]:popover-open rule
to take effect, as the specificity is the same */
@starting-style {
  #mobile-nav:popover-open {
    transform: translateX(100%);
  }
}
[popover]::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition: all var(--transition-definition) allow-discrete;
}

[popover]:popover-open::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);
}

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgba(0, 0, 0, 0);
  }
}
/*--------------------------------------------------------------
# Site Frame - FOOTER
--------------------------------------------------------------*/
.site-footer {
  --footer-bg-main: var(--color-offwhite);
  --footer-bg-nav: var(--color-turquoise);
  --footer-bg-legal: var(--color-black);
  --footer-bg-button: var(--color-blue);
  background-color: var(--footer-bg-main);
}

/* different footer colors for home OR NOT. 
.home .site-footer {
  --footer-bg-button: var(--color-brown);
  --footer-bg-legal: var(--color-blue);
  --footer-bg-nav: var(--color-champagne);
}
*/
.site-footer > div:not(.site-footer--legal) {
  padding-block: var(--space-md-lg);
}

@media screen and (width > 900px) {
  .site-footer {
    display: grid;
    grid-template-areas: "links info" "legal legal";
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 0 0;
  }
  .site-footer a:not([class]) {
    padding-block: calc(var(--space-xs) / 2);
  }
}
.site-footer--info {
  text-align: center;
  grid-area: info;
}

.site-footer--logo {
  width: 16em;
  max-width: 80vw;
}

.site-footer--links {
  grid-area: links;
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-md);
  background: var(--footer-bg-nav);
}

.site-footer :is(h2, h3, h4) {
  margin-bottom: 0;
}

.site-footer :is(button, .button, .footer--donate a) {
  background-color: var(--footer-bg-button);
  color: var(--color-white);
  transition: transform var(--transition-definition);
}

.site-footer :is(button, .button, .footer--donate a):is(:hover, :focus) {
  transform: scale(1.1);
}

.site-footer .footer--donate a {
  display: grid;
  font-size: 1.25em;
  width: fit-content;
  padding: 0.5em !important;
  aspect-ratio: 1;
  place-content: center;
  box-shadow: var(--box-shadow_subtle);
  border: 4px solid var(--color-white);
  border-radius: 50%;
  text-transform: uppercase;
}

@media screen and (width > 782px) {
  .site-footer .footer--donate a {
    position: absolute;
    top: var(--space-md-lg);
    right: var(--space-md);
  }
}
.site-footer--address span {
  display: block;
}

.site-footer--address span:first-child {
  margin-block: 0.5em;
}

.site-footer--links :is(h2, h3, h4) {
  color: var(--color-text);
}

.site-footer--links a:not([class]) {
  --link-color: var(--color-text);
}

.site-footer a:not([class]) {
  display: inline-block;
  padding-inline: 0;
  text-decoration: none;
}

.site-footer a:not([class]):is(:hover, :focus-visible) {
  text-decoration: underline;
}

.site-footer--legal {
  grid-area: legal;
  background: var(--footer-bg-legal);
  color: var(--color-text-on-dark);
  --link-color: var(--color-text-on-dark);
  text-align: center;
}
.site-footer--legal div {
  padding-block: 0.5em;
}
.site-footer--legal p {
  margin-block: 0;
}

.social {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.social svg {
  fill: currentColor;
  width: 1.3lh;
  height: 1.3lh;
}

/*--------------------------------------------------------------
# BREADCRUMBS
--------------------------------------------------------------*/
.breadcrumbs {
  padding-block: 0.5em;
  background: var(--color-content-bg_alt);
}

nav[aria-label=breadcrumbs] ol {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  font-size: 0.7777777em;
  margin-block: 0;
  flex-wrap: wrap;
}

nav[aria-label=breadcrumbs] li {
  max-width: 12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav[aria-label=breadcrumbs] li:last-child {
  max-width: 46vw;
}

@media (width > 40em) {
  nav[aria-label=breadcrumbs] li {
    max-width: 20em;
  }
}
nav[aria-label=breadcrumbs] li {
  margin-block: 0 !important;
}

nav[aria-label=breadcrumbs] li + li::before {
  content: "/";
  display: inline;
  margin-inline: 1em;
}

/*--------------------------------------------------------------
# Spacing below header and above footer
--------------------------------------------------------------*/
article:not(:has(> .alignfull:first-child)),
.search main {
  padding-top: var(--space-lg);
}

article:not(:has(> .alignfull[class*=color-scheme]:last-child)),
.search main {
  padding-bottom: var(--space-lg);
}

/*--------------------------------------------------------------
# PRINT Stylesheet
--------------------------------------------------------------*/
@media print {
  body .is-layout-grid {
    display: block !important;
  }
  body .is-layout-grid > *:not([aria-hidden]) {
    margin-block-start: 2em !important;
  }
  .wp-block-cover {
    min-height: unset;
  }
  .wp-block-cover img {
    display: none;
  }
  .wp-block-cover :is(h1, h2, h3, p) {
    color: #000 !important;
  }
  .simpletoc {
    display: none;
  }
  .site-footer, .site-header, .breadcrumbs, .prev-next-nav {
    display: none;
  }
  *[class] {
    color: #000 !important;
    background-color: transparent !important;
  }
  @page {
    margin-top: 3em;
    margin-bottom: 5em;
    padding-bottom: 2em;
  }
  article a::after {
    content: " [" attr(href) "] ";
    font-size: 0.8em;
  }
  body::after {
    content: "Source: " attr(data-url);
    display: block;
    text-align: center;
    padding-top: 3em;
    font-size: 10pt;
    line-height: 13pt !important;
  }
}
/* block style utilities */
.has-burgundy-border-color {
  --highlight-from-border-color: var(--color-burgundy);
}

.has-blue-border-color {
  --highlight-from-border-color: var(--color-blue);
}

.has-dark-green-border-color {
  --highlight-from-border-color: var(--color-dark-green);
}

.wp-block-button__link {
  display: block;
  transition: background var(--transition-definition), color var(--transition-definition);
}

/* HEADINGS - Divided */
.superheading, .subheading {
  display: block;
  font-size: 0.7em;
  color: var(--heading-part-color, currentColor);
  margin-block: 0 0.25em;
}

.superheading,
.wp-block-cover .subheading {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.subheading {
  display: block;
  font-style: italic;
  margin-block: 0.25em 0;
}

.wp-block-cover :is(.subheading, .superheading) {
  font-size: 0.5em;
  font-style: normal;
}

/* at columns breakpoint, don't float images */
@media (width < 782px) {
  .alignright, .alignleft {
    float: none !important;
    margin-inline: auto !important;
  }
}
/* contain any floated images in a group */
.wp-block-group:has(figure.alignright, figure.alignleft):after {
  content: "";
  display: table;
  clear: both;
}

/* clear any floats for groups, columns, separators */
.wp-block-group, .wp-block-columns, .wp-block-separator {
  clear: both;
}

/* MEDIA-TEXT - Default */
.wp-block-media-text {
  gap: var(--space-xs) var(--space-col-gap);
}
.wp-block-media-text :is(h2, h3, h3, h4) {
  margin-block: 0;
}
.wp-block-media-text .wp-block-media-text__content {
  padding-inline: 0;
}

/* MEDIA-TEXT-VERTICAL */
.wp-block-media-text.is-style-media-text_vertical {
  grid-template-columns: 100% !important;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.wp-block-media-text.is-style-media-text_vertical figure {
  grid-column: 1;
  grid-row: 1;
}
.wp-block-media-text.is-style-media-text_vertical > div {
  grid-column: 1;
  grid-row: 2;
  padding-inline: 0;
  align-self: start;
}

.is-style-media-text_vertical.has-background .wp-block-media-text__content {
  padding-inline: var(--space-md);
}

/* MEDIA-TEXT - Overlap */
.wp-block-media-text.is-style-media-text-overlap {
  gap: 0;
}

.is-style-media-text-overlap .wp-block-media-text__content {
  background: rgba(0, 0, 0, 0.8);
  box-shadow: var(--box-shadow);
  color: #FFF;
  padding: var(--space-md);
}
.is-style-media-text-overlap .wp-block-media-text__content *:last-child {
  margin-block-end: 0;
}

/* above point at which Wordpress stacks horizontal media-text blocks */
@media screen and (width > 600px) {
  /* text on the right */
  .is-style-media-text-overlap .wp-block-media-text__content:is(:last-child) {
    margin-left: -4em;
  }
  /* text on the left */
  .is-style-media-text-overlap .wp-block-media-text__content:is(:first-child) {
    margin-right: -4em;
    position: relative;
    z-index: 10;
  }
}
/* COVER */
.wp-block-cover :is(.wp-block-group, .wp-block-heading).has-background {
  backdrop-filter: blur(3px);
}

.wp-block-cover {
  padding: var(--wp--style--root--padding-right);
}

@media screen and (width > 57rem) {
  :is(.wp-block-cover-image, .wp-block-cover):is(.is-position-bottom-right,
  .is-position-top-right,
  .is-position-top-right,
  .is-position-bottom-left) > .wp-block-cover__inner-container {
    max-width: 45vw;
  }
}
/* COLUMNS - Default */
@media screen and (width > 768px) {
  .wp-block-columns.alignfull .wp-block-column:last-child :is(h1, h2, h3, h4, p, li) {
    padding-right: var(--wp--style--root--padding-right);
  }
}
@media screen and (width < 768px) {
  .wp-block-columns.alignfull .wp-block-column:has(p) {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
  }
}
/* COLUMNS - Has Inline Heading 
.is-style-has-inline-heading > .wp-block-column:first-child {
	text-align: center;
	padding-top: var(--space-xs);
	border-top: var(--border-thick-rule);
}
@media screen and (width > 782px) {
	.is-style-has-inline-heading > .wp-block-column:first-child {
		text-align: right;
	}
}
*/
/* CAROUSEL, IMAGE - Inset Caption */
/* the carousel block and the image block both have 'inset-caption' styles
 * the image block also has inset-caption_button 
 * the CHILD PAGE LIST custom block uses .is-style-inset-caption
 */
[class*=is-style-inset-caption] a,
[class*=is-style-inset-caption] a:is(:focus, :hover, :visited) {
  display: inline;
  color: inherit;
}

[class*=is-style-inset-caption] figure,
figure[class*=is-style-inset-caption] {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "single";
}

[class*=is-style-inset-caption] > * {
  grid-area: single;
}

[class*=is-style-inset-caption] > figcaption {
  background: color-mix(in oklab, var(--color-black), transparent 20%);
  color: var(--color-text-on-dark);
  padding: 0.5em;
  margin: 0.5em;
  align-self: end;
  line-height: 1.1;
  font-style: normal;
  z-index: 99; /* to make sure it stays on top of img with a transform */
  /* position: relative; TODO do we need this? */
}

[class*=is-style-inset-caption] img {
  object-fit: cover;
}

.is-style-inset-caption_button {
  position: relative;
}

.is-style-inset-caption_button figcaption {
  background: none;
  padding: 0;
  text-align: center;
}

.wp-block-image.is-style-inset-caption_button a {
  padding: 0.5em;
  background: color-mix(in oklab, var(--color-blue), transparent 10%);
  display: block;
  font-family: var(--type-font-heading);
  text-decoration: none;
  font-size: 1.2em;
  text-transform: uppercase;
  transition: all var(--transition-definition);
}

.wp-block-image.is-style-inset-caption_button a:is(:hover, :focus) {
  background: var(--color-blue);
  letter-spacing: 2px;
}

.wp-block-image.is-style-inset-caption_button a:after {
  position: absolute;
  content: "";
  /* TODO come back to idea of highlighting the hovered one while dimming the rest 
  background: #FFFC;
  mix-blend-mode: hue;
  opacity: 0;
  */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.is-style-blend-mode-multiply .wp-block-cover__background {
  mix-blend-mode: multiply;
}

/* POST GRIDS (QUERY LOOP Blocks and Variation) */
.wp-block-query .is-layout-grid > * {
  container-type: inline-size;
  position: relative;
  overflow: clip;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  /* text-align: center; less accessible */
}

.wp-block-query .is-layout-grid > * > *:not(figure) {
  padding: var(--space-sm);
  margin: 0;
}

.wp-block-query .is-layout-grid {
  /* the min-item-width is (the grid container width - number of gaps * gap width - a little give) divided by num desired columns on desktop */
  --grid-container-width: var(--size-primary-content-width);
  --preferred-num-columns: 3;
  --min-item-width: calc( (var(--grid-container-width) - (var(--preferred-num-columns) - 1) * var(--space-md-lg) - 5rem) / var(--preferred-num-columns) );
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min-item-width), 100%), 1fr));
  gap: var(--space-md-lg); /* TODO Where was this coming from ?*/
}

.alignwide .is-layout-grid {
  --grid-container-width: calc( var(--size-primary-max-width) - 2 * var(--wp--style--root--padding-left) );
}

.wp-block-query .is-layout-grid > * {
  transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

/* Remove Wordpress's positioning so block-link trick below works */
.wp-block-query .is-layout-grid .wp-block-group {
  position: unset !important;
}

.wp-block-query .is-layout-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.wp-block-query .is-layout-grid > *:has(a:hover, a:focus) {
  transform: scale(1.03);
  box-shadow: var(--box-shadow);
}

.wp-block-query .is-layout-grid img {
  aspect-ratio: 1;
  object-fit: cover;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
  width: 100%;
}

.wp-block-query .is-layout-grid :is(.type-place, .type-topic) img {
  aspect-ratio: 4/3;
}

.wp-block-query .is-layout-grid .type-person img {
  aspect-ratio: 7/8;
}

.wp-block-query .is-layout-grid :is(h2, h3, p) {
  margin-block: 0.4em 0.2em;
}

/* TODO shared with .wp-block-query .is-layout-grid */
.card-list > ul > li {
  position: relative;
  overflow: clip;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
}

@media screen and (width <= 768px) {
  .card-list .type-event > :last-child {
    padding: var(--space-sm);
  }
}
@media screen and (width > 768px) {
  .card-list .type-event {
    display: flex;
    gap: var(--space-col-gap);
    align-items: start;
    padding: var(--space-sm);
  }
  .card-list .type-event > figure {
    flex: 1 0 30%;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    overflow: clip;
  }
}
/* fill in an image placeholder when there's no image */
.wp-block-query .is-layout-grid > li:not(:has(figure))::before {
  content: "";
  display: block;
  background-image: url(assets/img/texture.svg), linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
  background-blend-mode: soft-light;
  background-color: var(--color-blue);
}

.type-person:not(:has(figure))::before {
  aspect-ratio: 7/8;
  background-color: var(--color-dark-green);
}

.type-place:not(:has(figure))::before {
  aspect-ratio: 4/3;
}

/* linked categories */
.wp-block-query .is-layout-grid .wp-block-post-terms {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  text-align: right;
}

.wp-block-post-terms a {
  display: inline-block;
  background-color: color-mix(in oklab, var(--color-champagne), transparent 15%);
  padding: 0.1em 0.5em;
  font-size: 0.8em;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
}

.wp-block-post-terms a:hover {
  background-color: var(--color-champagne);
}

*[class*=date] {
  font-feature-settings: "pnum", "onum";
}

*[class*=event-date] {
  font-weight: 600;
}

.single-event *[class*=event-date] {
  font-size: 1.2em;
  line-height: 1.1;
}

.is-style-event-date + :is(h2, h3, h4) {
  margin-block: 0;
}

.wp-block-quote {
  hanging-punctuation: first;
}

:is(.wp-block-quote, .wp-block-pullquote) cite {
  font-size: max(0.8em, 16px);
  margin-top: 0.5em;
}
:is(.wp-block-quote, .wp-block-pullquote) cite em {
  font-style: normal;
}

.wp-block-quote cite {
  text-align: right;
}

/* fancy-a = Left Border; fancy-b = Large Italics */
@media screen {
  .is-style-quote-fancy-a::before {
    content: "“";
    position: absolute;
    left: var(--space-sm);
    top: -1.1rem;
    color: var(--highlight-from-border-color, var(--color-border_rule));
    font-family: var(--type-font-heading);
    font-size: 3rem;
    font-weight: 700;
    text-box-trim: trim-both;
  }
}
/* bigger than --wp--style--global--content-size, with cushion */
@media (min-width: 62rem) {
  .is-style-quote-fancy-a::before {
    left: calc(var(--space-sm) * -2 - 8px);
  }
}
/* PULLQUOTE - Default */
.wp-block-pullquote p:last-of-type {
  margin-bottom: var(--space-xs);
}

/* VERSE - Default */
.wp-block-verse {
  width: max-content;
}

/* FOOTNOTES - Default */
.wp-block-footnotes {
  font-size: 0.8888888889em;
  padding-left: 0;
}

/*
.is-style-fact-box {
	font-size: .888888888em;
	line-height: 1.2;
	padding: var(--space-sm);
	box-shadow: 3px 3px 0 var(--color-content-bg), 4px 4px 0 var(--highlight-from-border-color, var(--charcoal));
}
@media (min-width: 50rem) {
	.is-style-fact-box {
		float: right;
		max-width: calc(.5 * var(--size-primary-content-width));
		margin-left: var(--space-md) !important;
		margin-right: calc(25vw - var(--size-primary-content-width) / 4) !important;
		margin-block: var(--space-sm) !important;
	}
}
.is-style-fact-box:has(h2, h3) {
	padding-top: 0;
}
.is-style-fact-box :is(p, li) {
	margin-top: .2em;
}
.is-style-fact-box :is(ol, ul) {
	padding-left: var(--space-sm);
}
.is-style-fact-box :is(h2, h3) {
	font-size: 30px !important; 
	margin-inline: calc(var(--space-sm)* -1) !important;
	padding: var(--space-xs) var(--space-sm);
	background: var(--highlight-from-border-color, var(--charcoal));
	color: var(--color-content-bg);
}*/
.pattern-hero-featured-img figure {
  padding-block: var(--space-md);
}

@media (width > 600px) {
  .pattern-hero-featured-img .wp-block-media-text {
    grid-template-columns: 1fr auto !important;
  }
  .pattern-hero-featured-img .wp-block-media-text img {
    max-height: 50vh;
  }
}
/* a subtitle following an h1 */
h1 + .has-heading-font-family {
  margin-block: 0.5em;
}

h1 + .has-heading-font-family:last-child {
  margin-block-end: 0;
}

/* an h1 with a following subtitle */
h1:has(+ .has-heading-font-family) {
  margin-block-end: 0;
}

.wp-block-group.limit-line-length {
  max-width: 36rem;
}

.wp-block-group.is-style-textured-background,
.wp-block-media-text.is-style-textured-background,
.wp-block-cover.is-style-textured-background .wp-block-cover__background {
  background-image: url(assets/img/texture.svg), linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.4));
  background-blend-mode: soft-light;
  background-size: 40% auto, auto;
}

/* LIST - Multicolumn */
dl.is-style-multicolumn {
  columns: 2;
  column-gap: var(--space-col-gap);
  padding-inline-start: 0;
}

/* LIST - Inline */
:is(ul, ol).is-style-inline li + li {
  padding-left: 0.4em;
  border-left: 1px solid currentColor;
  margin-block-start: 0 !important;
}

h2.is-style-small-caps-heading {
  --fl: 1.4;
}

h3.is-style-small-caps-heading {
  --fl: 1.2;
}

.wp-block-separator {
  align-self: stretch; /* give <hr> width when it's in a stack (flex column) */
}

/* not sure where 'Wide Line Style' is coming from, but this is to differentiate the default from wide */
.wp-block-separator.is-style-default {
  max-width: 10em;
}

/* remove weird pseudo element added by WP */
.wp-block-gallery.has-nested-images figure.wp-block-image::before {
  display: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
  font-size: inherit;
}

details.is-style-faq + details.is-style-faq {
  border-top: 1px solid var(--color-border_rule);
  margin-block: 0.5em;
  padding-block-start: 0.5em;
}

details.is-style-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
}

details.is-style-faq > summary::-webkit-details-marker {
  display: none;
}

details.is-style-faq > summary::after {
  margin-left: 1ch;
  display: inline-block;
  content: "+"; /* Plus icon */
  font-size: 1.5rem;
}

details.is-style-faq[open] > summary {
  color: #000;
}

details.is-style-faq[open] > summary::after {
  content: "-"; /* Minus icon */
}

.wp-block-create-block-nbd-child-page-list ul.is-layout-grid {
  --preferred-num-columns: 4;
}
.wp-block-create-block-nbd-child-page-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* TEMP try removing...it is messing with places where max-columns is set 
change the default grid styles so they wrap responsively (auto-fit). --min-grid-width is output by a filter in functions.php 
.wp-block-group.is-layout-grid[style*=--min-grid-width] {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-grid-width), 100%), 1fr)) !important;
}
*/
/* Includes .is-style-block-color and (TBD) .is-style-block-link */
[class*=is-style-block] .wp-block-group {
  height: 100%;
  border-radius: var(--border-radius-lg);
  overflow: clip;
}

[class*=is-style-block] .wp-block-group[style*=background-image] {
  background-blend-mode: soft-light;
  transition: background-size var(--transition-definition);
}

.is-style-block-color :is(h2, h3, h4) {
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[class*=is-style-block] :is(h2, h3, h4) a {
  text-decoration: none;
}

[class*=is-style-block] :is(h2, h3, h4) a {
  letter-spacing: 0.1em;
}

/* TEMP STUFF TODO MAKE NOT TEMP */
/* TODO This should really go somwhere else */
.site-main:has(.card-grid, .card-list) {
  background: var(--color-content-bg_alt);
}

article:has(.card-grid) h1 {
  margin-bottom: 1em;
}

/* layout grid does not inherit the column gap and we want different row and column gaps */
:is(.single-person, .single-topic, .single-place) .wp-block-group.is-layout-grid > *:first-child {
  container-type: inline-size;
}

.is-layout-grid.grid_fifty-fifty,
.is-layout-grid.grid_forty-sixty {
  column-gap: var(--space-col-gap);
  row-gap: 1rem;
  align-items: start;
  grid-template-columns: 1fr !important;
}

/* surprising note! https://smth.uk/rem-based-media-queries-are-weird */
@media screen and (width > 900px) {
  body:not(.pinch-zoomed) .is-layout-grid.grid_forty-sixty {
    grid-template-columns: 2fr 3fr !important;
  }
  body:not(.pinch-zoomed) .is-layout-grid.grid_fifty-fifty {
    grid-template-columns: 1fr 1fr !important;
  }
  .pinch-zoomed :is(.grid_forty-sixty, .grid_fifty-fifty) {
    max-width: 50rem;
    margin-left: 0 !important;
  }
}
/**
 * Cooperative animation layer for core/accordion. Companion to accordion-animation.js.
 *
 * Plain CSS; if your theme uses Sass, this drops into any partial unchanged.
 *
 * The Interactivity API binds `inert` on closed panels and core CSS turns
 * that into `display: none; margin-block-start: 0;`, which kills CSS
 * transitions AND collapses the heading-to-panel gap immediately. While JS
 * is animating it sets `.is-animating` on the panel; these rules un-hide the
 * panel and pin the gap to `var(--wp--style--block-gap)` so the JS can ease
 * `max-height` and `margin-block-start` in parallel. Once `.is-animating`
 * is removed, core's `display: none` (and the a11y semantics of `inert`)
 * resumes.
 *
 * Reduced-motion users keep core's instantaneous behavior (no rules below apply).
 */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-accordion-panel.is-animating {
    overflow: hidden;
    transition: max-height 0.3s ease, margin-block-start 0.3s ease;
  }
  /* Higher specificity than core's
     `.wp-block-accordion-panel[inert] { display: none; margin-block-start: 0; }`
     so the panel stays in layout AND keeps the heading-to-panel gap that
     `:root :where(.is-layout-flow) > *` provides
     (`--wp--style--block-gap`, commonly 24px from `theme.json`'s
     `styles.spacing.blockGap`). */
  .wp-block-accordion-panel.is-animating[inert],
  .wp-block-accordion-panel.is-animating[aria-hidden=true] {
    display: revert;
    margin-block-start: var(--wp--style--block-gap, 1.5rem);
  }
}
.wp-block-accordion-heading__toggle {
  gap: 0.5em;
}

.wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  width: 0.8em;
  height: 0.8em;
  color: var(--icon-color, var(--color-text));
  background-color: currentColor;
  transition: clip-path 300ms ease !important;
  /* a plus sign */
  clip-path: polygon(calc(50% - 2px) 0, calc(50% + 2px) 0, calc(50% + 2px) calc(50% - 2px), 100% calc(50% - 2px), 100% calc(50% + 2px), calc(50% + 2px) calc(50% + 2px), calc(50% + 2px) 100%, calc(50% - 2px) 100%, calc(50% - 2px) calc(50% + 2px), 0 calc(50% + 2px), 0 calc(50% - 2px), calc(50% - 2px) calc(50% - 2px));
}

/* animate transform to a minus sign */
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  transform: none;
  clip-path: polygon(calc(50% - 2px) calc(50% - 2px), calc(50% + 2px) calc(50% - 2px), calc(50% + 2px) calc(50% - 2px), 100% calc(50% - 2px), 100% calc(50% + 2px), calc(50% + 2px) calc(50% + 2px), calc(50% + 2px) calc(50% + 2px), calc(50% - 2px) calc(50% + 2px), calc(50% - 2px) calc(50% + 2px), 0 calc(50% + 2px), 0 calc(50% - 2px), calc(50% - 2px) calc(50% - 2px));
}

.wp-lightbox-container button {
  opacity: 1;
  transform: scale(1.5);
}

:root {
  --toc-list-height: 8rem;
  --toc-heading-size: 1.2rem;
}

/* toc may or may not be contained in a details/summary disclosure widget */
/* [role] because .simpletoc class is repeated on nested elements */
.simpletoc[role=navigation]:not(:has(details)),
.simpletoc[role=navigation] details {
  background-color: var(--color-panel-background);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
}

.simpletoc[role=navigation] {
  --color-panel-background: color-mix(in oklab, var(--color-content-bg), transparent 8%);
  font-size: 0.8888888em;
  position: sticky;
  top: var(--header-height_mobile);
  z-index: 7; /* above sticky nav on mobile */
}
.simpletoc[role=navigation] :is(h2, h3, h4, summary) {
  font-weight: 600;
  font-family: var(--type-font-heading);
  padding: calc(0.5 * var(--toc-heading-size));
  margin-block: 0 !important;
  font-size: var(--toc-heading-size) !important;
  line-height: 1;
}

/* JS adds .fixed class when the TOC reaches the top of the viewport (see clicky-menus.js) */
.simpletoc[role=navigation].fixed {
  position: fixed;
}

/* when we have non-sticky desktop nav instead of sticky mobile nav */
@media (width > 57rem) {
  .simpletoc[role=navigation] {
    top: 0;
  }
}
/* when we have enough room (at default global content width) to pin the toc to the left */
@media (width > 78rem) {
  :root {
    --toc-list-height: 40vh;
  }
  .is-layout-grid .wp-block-group:has(.simpletoc) {
    align-self: stretch;
  }
  article .simpletoc[role=navigation] {
    height: 0; /* we don't want sticky toc taking up height on the page */
    overflow: visible;
    box-shadow: none;
  }
  .simpletoc-list {
    max-height: var(--toc-list-height);
  }
}
.simpletoc-list {
  margin-block: 0 !important;
  list-style: none;
  border-block: 1px solid var(--color-pale-gold);
  padding: 1em;
  overflow: scroll;
  /* scroll-shadow stuff */
  background-image: linear-gradient(var(--color-panel-background, #FFF) 33%, transparent), linear-gradient(transparent, var(--color-panel-background, #FFF) 66%), radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.1), transparent), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.1), transparent);
  background-position: center top, center bottom, center top, center bottom;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% 2em, 100% 2em, 100% 0.8em, 100% 0.8em;
}

/* lower-level lists */
.simpletoc-list ul {
  list-style: none;
  padding-inline-start: 1.25em;
  margin-top: 0.25em;
}

/*
body:has(.hnh-timeline:last-child) footer {
  margin-top: 0;
}
.hnh-timeline figcaption strong {
  display: block;
  font-size: 1.2em;
}
.hnh-timeline h2 {
  background: linear-gradient(to bottom, 
                transparent calc(52% - 2px), 
                var(--color-pale-gold) calc(52% - 2px), 
                var(--color-pale-gold) calc(52% + 2px),
                transparent calc(52% + 2px));
  margin-block-end: 1em;

  strong {
    background: var(--color-charcoal);
    padding-inline: 1em;
    font-weight: inherit;
  }
}
.display-none.wp-block-columns {
  display: none; 
}

.hnh-timeline .wp-block-splide-carousel figure {
  position: relative;

  a::after {
    position: absolute;
    inset: 0;
    content: "";
    cursor: pointer;
  }
}

.hnh-timeline .splide__slide:has(a:hover) img,
.hnh-timeline .splide__slide:has(a:focus) img {
  transform: scale(1.1);
  transform-origin: 50% 50%;
}
  */
.wp-block-splide-carousel .splide__pagination {
  gap: 10px;
}
.wp-block-splide-carousel .splide__pagination .splide__pagination__page {
  width: 14px;
  height: 14px;
}

.wp-block-splide-carousel .splide__arrow,
.wp-block-splide-carousel .splide__pagination__page,
.wp-block-splide-carousel .splide__pagination__page.is-active {
  background-color: var(--color-pale-gold);
  opacity: 1;
}
.wp-block-splide-carousel .splide__arrow svg,
.wp-block-splide-carousel .splide__pagination__page svg,
.wp-block-splide-carousel .splide__pagination__page.is-active svg {
  fill: var(--color-white);
}

.wp-block-splide-carousel .splide__pagination__page.is-active,
.wp-block-splide-carousel .splide__arrow:is(:hover, :focus):not(:disabled) {
  opacity: 1;
  transform: translateY(-50%) scale(1.2); /* default splide styles include the translateY value */
  transform-origin: 50% 50%;
}

.wp-block-splide-carousel .splide__slide {
  /*  NOTE .splide__slide is 
       display: flex;
       flex-direction: column;
       overflow: hidden;
   */
  align-items: center;
  justify-content: center;
}
.wp-block-splide-carousel .splide__slide img {
  display: block;
  max-height: 80vh; /* make sure carousels aren't taller than viewport */
  width: auto;
  margin: auto;
  filter: none; /* TODO not needed once drop-shadow is a style */
  transition: all var(--transition-definition);
}

/* for carousels with a height specified, make the figures 100% minus room for caption */
.wp-block-splide-carousel .splide__slide[style*=height] figure {
  max-height: calc(100% - 4em);
}

@media (width < 600px) {
  /* if we only have one per page, we don't want any margin between slides
  * this fixes a bug on mobile where right margin causes overflow 
  */
  .wp-block-splide-carousel[data-splide*='perPage":1'] .splide__slide {
    margin-right: 0 !important;
  }
}
@media screen and (width < 768px) {
  /* my own cover-slideshow plugin */
  .cover-slideshow__toggle {
    bottom: auto;
    top: 1em;
  }
  .wp-block-cover.cover-slideshow .wp-block-cover__inner-container {
    width: 100% !important;
  }
}
/* Single post PREV / UP / NEXT navigation */
.prev-next-nav {
  padding-block: var(--space-lg);
  clear: both;
}

.prev-next-nav nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media screen and (width > 46em) {
  .prev-next-nav nav {
    grid-template-columns: 1fr 16em 1fr;
    grid-template-areas: "prev up next";
    padding-inline: var(--space-sm);
  }
  .nav-next {
    grid-area: next;
  }
  .nav-up {
    grid-area: up;
  }
}
.prev-next-nav a {
  display: block;
  text-decoration: none;
}

.prev-next-nav a[rel=next] .nav-direction {
  justify-content: flex-end;
}

.prev-next-nav a[rel=next] {
  text-align: right;
}

.prev-next-nav a[rel=back] .nav-direction {
  justify-content: center;
}

.prev-next-nav a[rel=back] {
  text-align: center;
}

.nav-direction {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8em;
}

.prev-next-nav a[rel=prev] .nav-direction::before,
.prev-next-nav a[rel=next] .nav-direction::after {
  --arrow-size: 1em;
  content: "";
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;
  width: calc(var(--arrow-size) / 2);
  border-style: solid;
  border-width: calc(var(--arrow-size) / 2) calc(var(--arrow-size) / 2) calc(var(--arrow-size) / 2) 0;
  border-color: transparent currentColor transparent transparent;
  text-decoration: none;
  transition: transform var(--transition-definition);
}

.prev-next-nav a[rel=next] .nav-direction::after {
  margin-left: 0.5em;
  margin-right: 0;
  transform: scaleX(-1);
}

.prev-next-nav a[rel=prev]:is(:hover, :focus) .nav-direction::before {
  transform: translateX(-0.8em);
}

.prev-next-nav a[rel=next]:is(:hover, :focus) .nav-direction::after {
  transform: translateX(0.8em) scaleX(-1);
}

.input-button-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.input-button-pair input {
  flex: 1 1 auto;
}

.input-button-pair button {
  flex: 0 1 auto;
}

.post-list-item {
  display: grid;
  gap: var(--space-col-gap);
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "image text";
  margin-block: min(4cqi, var(--space-sm));
}

.post-list-item img {
  max-height: 300px;
  overflow: clip;
  object-fit: cover;
  object-position: 50% 20%;
}

#map {
  width: 100%;
  min-height: 600px;
  background: linear-gradient(170deg, var(--color-turquoise), transparent);
  border: 10px solid #FFF;
  box-shadow: var(--box-shadow);
}

.temp-display-none {
  display: none;
}

.wp-lightbox-overlay .close-button svg {
  fill: #FFF !important;
  transform: scale(2);
}

.wp-lightbox-overlay .scrim {
  background-color: rgba(0, 0, 0, 0.4666666667) !important;
  backdrop-filter: blur(3px);
}/*# sourceMappingURL=style.css.map */