/*
a11y202203110950
Before stock modalSo CSS undo inherited unspecific button rules*/
	.modalSo button,
	.modal-open button {
		cursor: inherit;
		font-family: inherit;
		font-weight: inherit;
		line-height: inherit;
		margin: inherit;
		position: inherit;
		text-decoration: inherit;
		text-align: inherit;
		display: inherit;
		padding-top: inherit;
		padding-right: inherit;
		padding-bottom: inherit;
		padding-left: inherit;
		font-size: inherit;
		background-color: inherit;
		border: inherit;
		color: inherit;
		-webkit-transition: inherit;
		-moz-transition: inherit;
		transition: inherit;
		padding-top: inherit;
		padding-bottom: inherit;
		-webkit-appearance: inherit;
		font-weight: inherit;
	}
/*Return to stock modalSo CSS (all customization appears below a11y202203111004*/

*,*:after,*:before{box-sizing:border-box;}

/**
 * Including the at-only style with the dialog CSS as it is required
 * to visually hide a dialog's heading if desired.
 */
.at-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/**
 * Trigger styling
 */
[data-modal-open][hidden] {
  display: none;
}

/**
 * When a modal dialog is open, don't allow scrolling of content
 * beneath (on desktop). Also useful in negating instances of
 * double scroll bars.
 * (browser window + dialog if long enough content)
 */
body.modal-open {
  overflow: hidden;
}

/**
 * Modal Dialog base styling
 */
.js [data-modal],
.a11y-modal {
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 2px solid;
  bottom: 0;
  box-shadow: 0 0 1800px 400px rgba(0,0,0,.4);
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 660px;
  opacity: 1;
  overflow: auto;
  padding: 1.25em;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(0%);
  visibility: visible;
  width: 100%;
  z-index: 10; /* this should be more than enough... */
}

@media screen and ( min-height: 440px ) and ( min-width: 500px ) {
  .js [data-modal],
  .a11y-modal {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  }
}


/**
 * To allow for CSS animations, hidden modal dialogs are
 * not set to display: none, but rather the following rule
 * set, in combination with the dialog's default
 * position: fixed, will keep dialogs hidden from
 * all users until opened.
 *
 * This also solves an issue with iOS VO + Safari not allowing
 * modal dialogs to be focused, if the dialog is initially
 * set to "display: none".
 */
.js [data-modal][hidden],
.a11y-modal[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15vh);
  visibility: hidden;
}

.a11y-modal__close-btn {
  border: none;
}

.is-icon-btn {
  background: none;
  border: none;
  height: 2em;
  padding: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  width: 2em;
}

.is-icon-btn:hover [data-modal-x],
.is-icon-btn:focus [data-modal-x] {
  color: #600;
  transform: scale(1.3) rotate(45deg);
  transition: transform .2s ease-in-out;
}

[data-modal-x] {
  border-right: 2px solid;
  bottom: 0;
  display: block;
  height: 2em;
  left: 0;
  margin: auto;
  pointer-events: none;
  position: relative;
  right: 0;
  top: 0;
  transform: rotate(45deg);
  width: 2px;
}

[data-modal-x]:after {
  border-right: 2px solid;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate(-90deg);
  width: 100%;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
																a11y202203111004
Almost completely based on:
	https://github.com/scottaohara/accessible_modal_window

Apart from a11y202203110950 (above) all customization away from stock CSS is
below.

Stock HTML includes this note:
	Swap out disabled with the hidden attribute if you want the trigger to be
	completely hidden if JavaScript is unavailable for some reason.

	The hidden attribute and/or the disabled attribute will be removed
	during the script's setup function.

Todo
- no-JS
- ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/**
	 * Modal Dialog base styling
	 * a11y202203110907 allow full width
	 */
	.js [data-modal],
	.a11y-modal {
		/*a11y202205020942
		/*width: 100%;
		max-width: 100%;*/
		When the modal is hard up against the edge of the browser, it is less
		clear that it is a modal and looks a little more like a page, so
		it triggers people to use BACK. So dorp the width*/
		width: 95%;
		max-width: 95%;
		margin-top: 1.62em;
		margin-bottom: 1.62em;
	}

	/*Adjust the modal close button*/
		[data-modal-x] {
			top: -1em;
		}

		.a11y-modal__close-btn {
			border: none !important;
		}

		[data-modal-x],
		[data-modal-x]:after,
		.is-icon-btn:hover [data-modal-x],
		.is-icon-btn:focus [data-modal-x] {
			color: #634488;
		}

	/*Layout*/
		.modalSo {
			list-style: none;
			margin: 0 0 1.62em 0;
			display: flex;
			flex-wrap: wrap;
		}

		.modalSo > li {
			width: 260px;
			margin-right: 0.62em;
			margin-bottom: 0.62em;
			padding: 0.2em 0.62em;
			background: #f0f0f0;
			background: #f8f8f8;
			background: #f4f4f4;
/*			outline: 1px solid #e0e0e0;
			outline: 3px solid #efefef;*/
		}

	/*Appearance*/
		.modalSo button {
			box-shadow: 0px 0px 10px rgba(0,0,0,.5);
			border: 3px solid #fcfcfc;
			padding: 0.38em;
			text-decoration: underline;
			background-color: #fff !important;
			cursor: -moz-zoom-in;
	    	cursor: -webkit-zoom-in;
	    	cursor: zoom-in;
			width: 100%;
		}

		.modalSo button:hover {
			text-decoration: none;
		}

		.modalSo button {
			padding-top: 152px;
			background-size: auto 146px !important;
		}

		.modalSo > li > h2 {
			font-size: 106%;
			font-weight: bold;

			/*Pretty H2s a11y202203181151
			Allow H2s, up to two lines "tall", to all occupy equal height and
			for single lines to be bottom-aligned*/
			min-height: 4.2em;
			display: flex;
		}

		/*Pretty H2s a11y202203181151*/
		.modalSo > li > h2 span {
			display: inline-block;
			align-self: flex-end;
		}

		/*The first P after the button is the link to the PDF*/
		.modalSo > li > button + p {
			margin-right: 0.38em;
			text-align: right;
			margin-bottom: 0.38em;
		}

		.modalContent h1 {
			margin-top: 1.62em;
		}

		.modalSo .blocky {
			margin-left: 0.33em;
		}