/**
 * General theme file.
 *
 * Rules should apply to mobile first and wider views are located further down in the @media sections.
 */
@media (prefers-color-scheme: dark) {
   html:has(#colour-scheme input:checked) {
      color-scheme: light;
   }
}

@media (prefers-color-scheme: light) {
   html:has(#colour-scheme input:not(:checked):not(:indeterminate)) {
      color-scheme: dark;
   }
}

html {
   background-color: var(--colour-canvas);

   color: var(--colour-canvas-contrast);
   line-height: var(--text-line-height);
   font-family: var(--body-font), sans-serif;
}

body {
   max-width: 100%; /* prevent images causing x-overflow */
   gap: var(--space-800);
}

body > header {
   position: sticky;
   top: 0;
   z-index: 10;

   display: grid;
   grid-template-areas: 'logo   nav    controls'
                        'crumbs crumbs crumbs';

   column-gap: var(--space-700);
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   background-color: var(--colour-canvas);
}

body > header .logo-home img {
   max-height: 3lh;
   min-height: 2lh;
   width: 100%;
}

body > header nav.primary > details > summary {
   display: inline-block;

   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);
}

/* hover filter breaks "position: fixed;" for the light-dismiss hook */
body > header nav.primary > details[open] > summary {
   filter: none;
}

/* allow menu button to light-dismiss (TODO: replace with popovers when better support) */
body > header nav.primary > details[open] > summary:before {
   display: block;
   position: fixed;
   z-index: 0;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100dvh;
   content: '';

   opacity: 0.5;
   background-color: #111;
}

body > header nav.primary menu {
   border-radius: var(--border-radius);
}

@supports selector(::details-content) {
   body > header nav.primary > details::details-content {
      position: absolute;
      margin-inline: auto;
      left: 0;
      right: 0;
   }
}

@supports not selector(::details-content) {
   body > header nav.primary > details > menu {
      position: absolute;
   }
}

body > header nav.primary > details > menu {
   /* be above the light-dismiss touch area */
   z-index: 1;

   margin-inline: auto;
   left: 0;
   right: 0;

   box-shadow: 5px 5px 8px black;
   width: 100%;
   max-width: min(calc(var(--max-text-width) / 2), 90vw);

   background-color: var(--colour-canvas);
   padding: var(--space-500);

   color: var(--colour-canvas-contrast);
}

body > header nav.primary menu menu {
   display: grid;
   grid-template-columns: auto auto;
   column-gap: 0.5ch;
}

body > header nav.primary li {
   display: flex;
}

body > header nav.primary menu menu li,
body > header nav.primary menu menu a {
   display: grid;
   grid-template-columns: subgrid;
   grid-column-start: 1;
   grid-column-end: -1;
   align-items: center;
}

body > header nav.primary i {
   margin-inline: auto;
}

body > header .breadcrumb {
   grid-area: crumbs;
}

body > header .breadcrumb menu {
   display: block;
   margin: 0;
   padding: 0;
}

body > header .breadcrumb li {
   display: inline-block;
}

body > header .breadcrumb li:before {
   content: '/';
}

main {
   gap: var(--space-800);
   margin-inline: auto;
}

h1, h2, h3, h4, h5, h6 {
   font-family: var(--header-font), sans-serif;
}

h1, h2, h3, h4, h5, h6, p, li, dd {
   max-width: var(--max-text-width);
}

a:any-link {
   color: var(--font-color-link);
   transition-property: color, text-decoration-color;
   transition-timing-function: ease-out;
   transition-duration: 125ms;
}

a:any-link:hover {
   color: var(--font-color-link-hover);
}

/* Links with icons should avoid underlining the icon; :where() selector needed to make it perform as fallback */
:where(a:any-link:has(> .fa-solid, > .fa-regular, > .fa-brands)) {
   display: inline-flex; /* prevent underline of the space between icon and text */
   align-items: center;
   gap: 0.5ch;
}

a:any-link:has(> .fa-solid, > .fa-regular, > .fa-brands) :where(.fa-solid, .fa-regular, .fa-brands):before {
   display: inline-block; /* causes atomic inline; https://www.w3.org/TR/css-text-decor-3/#line-decoration */
}

img {
   border-radius: var(--border-radius);
}

img.icon {
   justify-self: center;
   display: inline-block;
   max-height: 1.3rem;
   vertical-align: middle;
}

article:has(> :is(img, a) + :is(img, a)):not(:has(> :not(img):not(a))) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: var(--max-text-width);
}

.prose :is(figure, img):nth-of-type(odd) {
  float: left;
  margin: 20px 20px 10px 0;
}

.prose :is(figure, img):nth-of-type(even) {
  float: right;
  margin: 20px 0 10px 20px;
}

address {
   font-style: normal;
}

footer {
   justify-content: center;
   gap: var(--space-700);
}

footer .ascii-logo {
   margin-inline: auto;
   text-align: center;
   user-select: none;
}

footer .ascii-logo span {
   display: inline-block;
   max-height: 1rem;
}

footer .socials a {
   font-size: 2rem;
}

footer ul {
   display: flex;
   margin-inline: auto;

   --footer-list-spacing: var(--space-400);

   padding: 0;
   gap: var(--footer-list-spacing);
}

footer li {
   display: block;

   border-right: 1px solid currentColor;

   padding-right: var(--footer-list-spacing);
}

footer li:last-of-type {
   border-right: none;

   padding-right: unset;
}

footer > div {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--space-800);
}

footer small {
   text-align: center;
}

footer .fa-canadian-maple-leaf {
   color: red;
}

/* desktop */
@media (min-width: 1024px) {
   body {
      /*gap: var(--space-900);*/
   }

   body > header {
      justify-content: center;
   }

   body > header .logo-home img {
      max-height: 4lh;
      min-height: 2lh;
   }

   /** no need for hamburger menu on desktop; however, older browsers within support window do not support
     * details-content, so still show them the mobile menu */
   @supports selector(::details-content) {
      body > header nav.primary > details > summary {
         display: none;
      }

      body > header nav.primary > details {
         display: flex;
         justify-content: center;
      }

      body > header nav.primary > details::details-content {
         position: static;
         display: block;
         content-visibility: visible;
         block-size: auto;
         overflow: visible;
      }

      body > header nav.primary > details::details-content {
         margin-inline: auto;
      }

      body > header nav.primary > details > menu {
         position: static;
         display: flex;

         margin-inline: auto;
         box-shadow: none;
         max-width: none;

         flex-direction: row;
         gap: var(--space-700);
      }

      /* hover filter breaks "position: fixed;" for the light-dismiss hook; repeated here for the nested menu */
      body > header nav.primary > details details[open] > summary {
         filter: none;
         z-index: 0;
      }

      body > header nav.primary summary {
         position: relative;
         z-index: 2;
      }

      /* allow menu button to light-dismiss (TODO: replace with popovers when better support) */
      body > header nav.primary > details details[open] > summary:before {
         display: block;
         position: fixed;
         z-index: 0;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100dvh;
         content: '';

         /*opacity: 0.5;*/
         /*background-color: #111;*/
      }

      body > header nav.primary > details details::details-content {
         position: absolute;

         /* be above the light-dismiss touch area */
         z-index: 1;

         box-shadow: 5px 5px 8px black;
         border-radius: var(--border-radius);
         border-top-left-radius: 0;

         background-color: var(--colour-canvas);

         color: var(--colour-canvas-contrast);
      }

      body > header nav.primary > details details > menu {
         margin: var(--space-400) var(--space-500);
      }

      /* first-layer links and menu titles */
      body > header nav.primary > details > menu > li > a,
      body > header nav.primary > details details > summary {
         padding: var(--space-300) var(--space-400);
      }

      body > header nav.primary menu {
         padding: 0;
      }
   }
}