:root {
   --widgets-button-shadow: none;
   --widgets-button-border: 1px solid ButtonBorder;
   --widgets-button-face: ButtonFace;
   --widgets-button-text: ButtonText;
}

button,
input[type="button"] {
   box-shadow: var(--widgets-button-shadow);
   border: var(--widgets-button-border);
   border-radius: var(--space-200);

   background-color: var(--widgets-button-face);
   padding: var(--space-300) var(--space-400);

   color: var(--widgets-button-text);
}

/* === Accordions === */

/* All accordions, including in header nav */
/* these 2 allow animation on expand for details */
@supports selector(::details-content) {
   details::details-content {
      overflow: clip; /* needed to avoid chrome flashing content during animation. better than hidden for axis independence */
      transition: block-size, content-visibility;
      transition-duration: 250ms;
      transition-timing-function: ease-out;
      transition-behavior: allow-discrete;

      block-size: 0;
   }

   details[open]::details-content {
      block-size: auto;
   }
}

/* only body accordions below */
main details :where(h1, h2, h3, h4, h5, h6) {
   margin: 0;
}

main details {
   margin-block: var(--space-500);

   border: 1px solid var(--colour-canvas-contrast);
   border-radius: var(--space-500);

   /* needed to contain left/right floated images beside text when taller than text */
   /* See: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Block_formatting_context */
   contain: layout;
}

main summary {
   display: flex;

   justify-content: space-between;

   padding: var(--space-500);
   background-color: transparent;

   gap: var(--space-500);
}

main details:hover,
main details[open] {
   border-color: var(--colour-brand1);
}

main summary::after {
   scale: 1.7;
   height: 1.5em;

   background-color: transparent;

   color: var(--colour-canvas-contrast);
   text-align: center;
   content: "+";
   font-family: sans-serif;

   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(.4, .73, .94, .71);
}

main details[open] > summary::after {
   transform: rotate(45deg);
   transition-property: all;
   transition-timing-function: cubic-bezier(.4, .73, .94, .71);
   color: var(--colour-brand1);
}

main details:before {
   width: 6px;
   background: var(--colour-brand1);
   content: '';
   height: 100%;
   display: block;
   position: absolute;
}

main details {
   contain: paint;
}

main details::details-content {
   contain: layout; /* contain child margins */
   padding-inline: var(--space-500);

   font-weight: 400;
   color: #444;
}

main details[open]::details-content {
   padding-bottom: var(--space-500);
}

/* === End Accordions === */

/* === Index Listings === */

ul.page-index,
ol.page-index {
   display: grid;

   min-width: 50vw;

   padding: 0;
   grid-template-columns: repeat(auto-fit, minmax(10rem, 12rem));
   gap: var(--space-700) var(--space-600);
   justify-content: center;
   align-items: flex-start;
}

ul.page-index li,
ol.page-index li {
   display: flex;
   justify-content: center;
   align-items: stretch;
   height: 100%;
}

/* === end Index Listings === */

/** === Image Fan ===
 * Displays an array of images in an arched row, up to 3 on mobile, 5 on desktop
 */

.image-fan {
   display: grid;

   margin-inline: auto;
   margin-bottom: var(--space-500);

   max-width: var(--max-text-width);

   --fan-count: 3;

   grid-template-columns: repeat(var(--fan-count), 1fr);
   gap: var(--space-500);
}

/* Note: all photos must be 4x5 ratio */
.image-fan img {
   z-index: 1; /* if without transform, preserve stacking order */

   aspect-ratio: 0.8; /* 4x5 ratio */
   border: 1px solid transparent;

   will-change: transform; /* fixes antialias jags on chrome */

   transition-property: scale, transform;
   transition-duration: 250ms;
   transition-timing-function: ease-out;
   scale: none;
   transform-origin: bottom;
}

.image-fan img:hover,
.image-fan img:active {
   z-index: 2;
   scale: 1.3;
}

.image-fan picture,
.image-fan img {
   grid-row: 1;
}

/* Note: the nth position is the DOM sequence, but we want them to fan out from center, allowing img counts of 1, 3, or 5 */
/* Resequencing ABCDE => DBACE */

/* D */
.image-fan > :nth-child(4),
.image-fan > picture:nth-child(4) img {
   display: none;

   grid-column: calc((var(--fan-count) / 2) - 2);
   transform: rotate(-10deg) translateY(29px) translateX(-2px);
}

/* B */
.image-fan > :nth-child(2),
.image-fan > picture:nth-child(2) img {
   grid-column: calc((var(--fan-count) / 2) - 1);
   transform: rotate(-5deg) translateY(7px);
}

/* A */
.image-fan > :nth-child(1),
.image-fan > picture:nth-child(1) img {
   grid-column: calc(var(--fan-count) / 2);
}

/* C */
.image-fan > :nth-child(3),
.image-fan > picture:nth-child(3) img {
   grid-column: calc((var(--fan-count) / 2) + 1);
   transform: rotate(5deg) translateY(7px);
}

/* E */
.image-fan > :nth-child(5),
.image-fan > picture:nth-child(5) img {
   display: none;

   grid-column: calc((var(--fan-count) / 2) + 2);
   transform: rotate(10deg) translateY(29px) translateX(2px);
}

/* desktop */
@media (min-width: 1024px) {
   .image-fan {
      --fan-count: 5;
   }

   .image-fan > picture:nth-child(4),
   .image-fan > picture:nth-child(5) {
      display: contents;
   }

   .image-fan > img:nth-child(4),
   .image-fan > img:nth-child(5),
   .image-fan > picture:nth-child(4) img,
   .image-fan > picture:nth-child(5) img {
      display: unset;
   }
}

/* === end Image Fan === */


/* === Business Hours === */
.business-hours {
   width: min-content;
}

.business-hours .regular-hours {
   display: grid;
   grid-template-columns: repeat(4, min-content);
   gap: var(--space-400) var(--space-200);
   min-width: 20ch;
}

.business-hours .regular-hours :is(dt, dd) {
   margin: 0;
   text-align: center;
}

.business-hours .regular-hours dd {
   display: grid;
   grid-template-columns: subgrid;
   grid-column-end: span 3;
   text-align: right;
}

/* === end Business Hours === */

/* === Fast Facts === */
.fast-facts {
   border: 1px solid #aaa;
   border-radius: var(--space-400);
   overflow: hidden; /* clip header */
}

.fast-facts :where(h1, h2, h3, h4, h5, h6) {
   margin: 0;

   border-bottom: 2px solid var(--colour-brand1);

   max-width: none;
   width: 100%;
   padding: 10px 5px;

   background-color: #333;

   text-align: center;
   color: white;
}

.fast-facts p,
.fast-facts dl {
   padding-inline: var(--space-500);
}

.fast-facts p {
   margin-inline: auto;


   text-align: center;
}

@media (min-width: 1024px) {
   .fast-facts {
      display: inline-block;

      float: left;

      margin: var(--space-500);
      margin-left: 0;
      margin-top: 0;

      max-width: calc(var(--max-text-width) / 3);
      width: fit-content;
   }
}

/* === end Fast Facts === */

/* === Cardicles === */
/* Any list of articles is a card by definition */

li > article,
li > a > article {
   border: 1px solid var(--colour-canvas-contrast);
   border-radius: var(--space-400);
   contain: paint; /* clip content background colours */

   transition-duration: 150ms;
   transition-timing-function: ease-out;
   transition-property: border-color;
}

/* avoid clickable area outside the visible link-cardicle */
li > a > article {
   height: 100%;
   width: 100%;
}

li > article:hover,
li > a > article:hover {
   border-color: var(--colour-brand1);
}

li > article header :is(h1,h2,h3,h4,h5,h6),
li > a > article header :is(h1,h2,h3,h4,h5,h6) {
   margin: auto;
   line-height: normal;
   font-size: medium;
}

li > article header,
li > article footer,
li > a > article header,
li > a > article footer {
   padding: var(--space-400);
   text-align: center;
}

:is(li > article, li > a > article) > :is(picture, img),
:is(li > article, li > a > article) > figure > :is(picture, img) {
   border-end-start-radius: 0;
   border-end-end-radius: 0;
}

/* === end Cardicles === */

/* === Primary Actions === */

.primary-actions {
   width: fit-content;
   margin-inline: auto;

   flex-direction: row;
   flex-wrap: wrap;
   --gap: var(--space-600);
   gap: var(--gap);
   justify-content: center;
   align-items: self-start;
}

.primary-actions > * {
   flex-grow: 0;
   flex-basis: calc(30% - var(--gap));

   justify-content: center;
   align-items: center;

   text-align: center;
}

.primary-actions a {
   display: flex;

   flex-direction: column;
   justify-content: center;
   gap: var(--space-500);
   padding: var(--space-500);

   font-size: 1.25rem;
}

.primary-actions i {
   margin-inline: auto;
   font-size: 5rem;
   color: var(--colour-brand1);
}

/* desktop */
@media (min-width: 1024px) {
   .primary-actions {
      gap: var(--space-700);
   }

   .primary-actions i {
      font-size: 6rem;
   }

   .primary-actions a {
      font-size: 1.5rem;
   }
}

/* === end Primary Actions === */

/* === Prose === */

.prose {
   display: block;
   max-width: var(--max-text-width);
}

.prose :is(h2, h3, h4, h5, h6) ~ p {
   /* avoids dangling single line when the floated element is one line shorter than the nearby graf */
   display: flow-root;
}

.prose :is(aside, picture, img) + p {
   /* and allow the flow to work as normal */
   display: revert;
}

/* === end Prose === */

/* === Summary Box === */

.summary-box {
   margin-top: 20px;
   margin-bottom: 20px;
   padding: 20px 20px;
   border: 1px solid var(--colour-brand1);
   border-radius: 0 10px;
   box-shadow: 1px 2px 3px #aaa;
}

.summary-box p {
   margin: auto;
}

/* === End Summary Box === */

/* === Jump Menu === */

article > nav {
   margin: 25px auto;
   padding: 20px 25px 30px;
   border: 1px solid var(--colour-brand1);
   border-radius: 0 10px;
   box-shadow: 1px 2px 3px #aaa;
}

article nav > ul {
   list-style: none;
   padding-left: 0;
   display: grid;
   gap: 10px;
}

/* split into 2 columns if the last child is ≥ 6 AND even  */
article nav > ul:has(> :nth-child(6):nth-child(even):last-child) {
   grid-template-columns: 1fr 1fr;
   gap: 10px 40px;
}

article nav > ul > li > a {
   display: grid;
   grid-template-columns: 1.5em 1fr;

}
/* === End Jump Menu === */