/*shim rule*/
[hidden]{display:none}

.visHide {
  /* But still viewable by screen readers,
   Originally, I thought to have all items read aloud, even if the page was never advanced to the next screen/set of items.
  However, since many users are only "hard-of-seeing" rather than "completely blind", it is prudent to keep the visual and verbal in harmony; using this style-rule sparingly, ie, reserved for the expected/common blind-only controls like "Skip to Content".
*/
  position: absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.visHide:focus {
  position: unset;
  width:unset;height:unset;
  padding:unset;margin:unset;
  overflow: unset;
  clip-path: unset;
}

/* Because we currently prefer the pagination navigation
 * to stay at the bottom when it's clicked,
 * and the accordion smooth expands, activate smooth scrolling
 * unless they prefer reduced motion.
 * EDIT: I guess it does not smooth expand the accordions, belay that for now.
 */
/*    HTML{scroll-behavior: smooth;}*/
/*@media (prefers-reduced-motion) {*/
/*    HTML{scroll-behavior: auto;}*/
/*}*/

/* --CONTENT FRAME-- */
/* Wrapper for the pseudo-iFrame and P8n Navbar */
.enpaginate {
  /* Configure */
  max-width: 100%;
  /* Suggested */
  margin: 1rem auto; /* Orig: 1rem auto */
  --minLogoHt: 50px;
  --subMenuHt: 76px;
  --pagin8Nav: 47px;
  --vwMaxHt: calc(100vh - ( var(--minLogoHt) + var(--subMenuHt) + var(--pagin8Nav) ));
}

/* The primary content */
.enpaginate > UL {
  /* Configure */
  border: 1px solid #767676;
  /* background: transparent; */
  /* Adjustable */
  max-height: var(--vwMaxHt); /* Screen height minus height of p8n-navbar */
  min-height: 7rem; /* ~ The height of 1 [collapsed] event summary (may need to be the height of 2?)  */
  /* Recommended */
  padding: 0; /* Orig: 0 */
  margin: 1rem; /* Orig: 1rem */
  list-style: none; /* Orig: none */
  /* Required */
  overflow: auto; /* Prgsv. Enhncmnt. will override this */
}

/* Each Individual Item wrapper */
.enpaginate > UL > LI {
  /* Configure */
  border-bottom: 1px solid #333;
}

/* Remove the extra bottom-margin and border at the end of the list(s) */
.enpaginate > UL > LI:last-of-type/*, .enpaginate > UL > LI:nth-of-type(__n) is injected by JS. */ {
  /* Recommended */
  border-bottom: 0; /* Orig: 0 */
  margin-bottom: 0; /* Orig: 0 */
}

/* --PAGINATION NAVBAR-- */
NAV.pagination > UL {
  /* Essential */
  display: flex; /* Orig: flex */
  justify-content: center; /* Horiz. Orig: center */
  align-items: center; /* Vert. Orig: center (overrides CSS default stretch) */
  list-style: none; /* Orig: none */
  padding: 0; /* Orig: 0 */
}

/* --P8n-NAVBAR BUTTONS-- */
/* The A-Tag's clickable region will be expanded to its parent LI. ergo, the surrounding LI ought to look like a BUTTON */
NAV.pagination > UL > LI {
  /* Configure */
  --primaryColor:#002f87;
  --secondaryColor:#8FB1EF;
  --square: 1.8rem;
  /* Adjustable */
  margin: 0 0.25rem;
  border: 1px solid #777;
  border-radius: 3px;
  /* Essential */
  line-height: var(--square, 1.8rem); /* Orig: var(--square, 1.8rem) */
}

NAV.pagination > UL > LI > BUTTON {
  /* Configure */
  color: navy; /* Fallback if !support( var() ) */
  color: var(--primaryColor, navy);
  /* Adjustable */
  text-transform: UPPERCASE;
  font-weight: bold;
  padding: 0 .5rem;
  /* Recommended */
  text-decoration: none;
  text-align: center;
  background-color:transparent;
  /* Essential */
  text-align: center; /* Orig: center */
  line-height: var(--square, 1.8rem); /* Orig: var(--square, 1.8rem) */
  min-height: var(--square, 1.8rem); /* Orig: var(--square, 1.8rem) */
  min-width: var(--square, 1.8rem); /* Orig: var(--square, 1.8rem) */
}

/* "Direct-Click"-Nav specific: Highlight "Current [Page] Tab" */
/* TODO: Consider adding a className instead of relying on newer CSS:has() */
NAV.pagination > UL > LI:has(BUTTON[aria-current="page"]) {
  background-color: navy; /* Fallback if !support( var() ) */
  background-color: var(--primaryColor, navy);
}

/* "Direct-Click"-Nav specific: Change text & mouse appearance on "Current [Page] Tab" */
NAV.pagination > UL > LI > BUTTON[aria-current="page"] {
  color: #fff;
  cursor: default;
}

/* "Button" Interactions */
NAV.pagination > UL > LI:hover,
NAV.pagination > UL > LI:has(BUTTON:focus) {
  background-color: lightsteelblue;/* Fallback if !support( var() ) */
  background-color: var(--secondaryColor,lightsteelblue);
}

NAV.pagination > UL > LI > BUTTON:active {
  color: #FFF;
}

/* Disabled "Buttons" */
NAV.pagination > UL > LI > BUTTON[disabled]{
  color: #999;
  cursor: not-allowed;
}

NAV.pagination > UL > LI:has(BUTTON[disabled]):hover,
NAV.pagination > UL > LI:has(BUTTON[disabled]:focus){
  background-color:transparent;
}

/* A11y-Specific*/
/* Move the focus outline from the A-tag's text to its click-area made by the `::before` pseudo-element */
NAV.pagination > UL > LI > BUTTON:focus {
  /* Required */
  outline: none;
}

NAV.pagination > UL > LI > BUTTON:focus-visible::BEFORE{ /* "":focus-visible" is more-specifically "focused via keyboard" (not via mouse/touch) */
  /* Suggested */
  outline: 2px ridge;
  border-radius: 2px;
}

/* When Javascript autoscrolls to 
 * keep/"sticky" navigation on the bottom of the screen
 * this will keep some whitespace (a margin)
 * below the navbar. */
NAV.pagination{
    /* Recommended */
    --pgrNavMgBot: .8em; /* Orig: .8em */
    justify-content: center; /* Orig: center */
    scroll-margin-bottom: .8em; /* Fallback 1 of 2: no CSS functions */
    scroll-margin-bottom: var(--pgrNavMgBot, .8em); /* Fallback 2 of 2: Parent height unknown. */
    scroll-margin-bottom: max( var(--pgrNavMgBot, .8em), calc( 50vh - (var(--vwHeight, var(--vwMaxHt, calc(100vh - 125px) ) ) / 2) ) ); /* Center whole widget if possible, else sticky-navbar to bottom.*/
}

/* "Typed"-Nav specific: Parent/wrapper holding textbox */
NAV.pagination > UL > LI.pgCtrl {
  /* Adjustable */
  font-weight: bold;
  /* Recommended */
  border: 0; /* Remove BUTTON-like border (the contained textfield will have its own) */
  cursor: pointer; /* JS will make this act like a LABEL, sending focus to the textbox onClick. */
  min-width:unset;
  padding:0 .5rem;
}

/* "Typed"-Nav specific: The textbox itself */
NAV.pagination > UL > LI.pgCtrl > INPUT{text-align:center; box-sizing:border-box;font-weight:bold;}

/* If the navbar element itself (not the device screen) is wide-enough, add textual labels to the controls */
NAV.pagination { /* Required */ container-type:inline-size; /* Defines how the width will be calculated in the upcoming container-query */ }

@container (width > 504px){
  UL.typedNav > LI > BUTTON.bkwd::AFTER,UL.typedNav > LI > BUTTON.frwd::BEFORE{
    /* Adjustable */
    --arrowMargin: .25rem;
    /* Essential */
    content: attr(title);
    display:inline-block;
  }

  UL.typedNav > LI > BUTTON.bkwd::AFTER{
    margin-left: .25rem; /* Fallback for !support( var() ) */
    margin-left: var(--arrowMargin, .25rem);
  }
  
  UL.typedNav > LI > BUTTON.frwd::BEFORE{
    margin-right: .25rem; /* Fallback for !support( var() ) */
    margin-right: var(--arrowMargin, .25rem);
    position: static;
  }

  UL.typedNav > LI > BUTTON[title*="Prev"]::AFTER{content:"Prev";}/* Shortening the label */
  
  UL.typedNav > LI > BUTTONfrwd::AFTER{
    content:'';position:absolute;
    top:0;right:0;bottom:0;left:0;
  }/* Since we're switching the usage of ::BEFORE/::AFTER, expand Clickable Area to Parent Container */

  UL.typedNav > LI > BUTTON.frwd:focus-visible::BEFORE{
    outline:0;
  }

  UL.typedNav > LI > BUTTON.frwd:focus-visible::AFTER{
  outline: 2px ridge;
  border-radius: 2px;
}

}/*End of @container [the navbar] (width > 504px)*/

@container (width < 316px){
    NAV.pagination > UL.typedNav{
        margin-top:-.8rem;
    }
    
    NAV.pagination > UL > LI.pgCtrl {
        color:#0006;
        font-size:small;
    }
    
    NAV.pagination > UL > LI.pgCtrl > INPUT {
        display:block;
        margin:0 auto;
    }
}

UL.event-list{
    background:#fff;
    padding:0 1em;
    border-radius:8px;
    font-family:Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Strongly Recommended */
    list-style:none;

    & > LI{
        border-bottom:2px solid #0006;
        padding:.5em;
        margin-bottom:0;
        position:relative;
        &:last-child{border-bottom:0}

        & > DETAILS{
          
          
            & > SUMMARY{
              color: #002f87;
              font-weight: bold;
              font-size:1.35rem;
              /* font-family: "gotham", Arial, sans-serif; */
              margin:0 0 .5rem;
              /* Remove the default "Disclosure Arrow"  */
              list-style: none;/* Modern Standard */
              &::-webkit-details-marker{display: none;}/* For older WebKit-based browsers and Safari */
              &::marker{content: "";}/* Alternative fallback: forces standard browsers to drop the list marker format */

                & > EM{
                  display: block;
                  color: #453030;
                  font-size: 1rem;
                  font-weight: normal;
                  margin:.5rem 0;
                  position: relative;
                  container-type: inline-size;

                    &::after {
                        content: "Read Description";
                        background: #e0e0e0;
                        font-size: 0.8rem;
                        font-weight: normal;
                        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                        text-align: center;
                        padding: .25rem .75rem;
                        border-radius: 0.75rem;
                        margin: .5rem;
                        display:inline-block;
                    }
                    @container (width<310px){
                      &::after{
                        display:block;
                      }
                    }
                    @container (width>=355px){
                      &::after{
                        position: absolute;
                        right: 0; top:50%;
                        translate: 0 -50%;
                        margin:0 .5rem 0 0;
                      }
                    }/* EM::AFTER.read-more */
                }/* EM */

                &:hover > EM::AFTER{background:#777;color:#fff}
            }/* SUMMARY */

            &[open] > SUMMARY > EM::AFTER{content:"Hide Description"}

            & > DIV.loc{margin-bottom:0.875rem;}

            & A:any-link{
              text-underline-offset:2px;
              transition: text-underline-offset .2s;
              &:hover{
                text-underline-offset:.05em;
                .row &{text-decoration:underline;}
              }
            }
        }/* DETAILS */

        &.noDesc > DETAILS > SUMMARY > EM::AFTER{content:none}

        /* Hoisted `Register` Link"-Button" */
        & > A[title*='regist' i]:last-child{
          text-transform:uppercase;
          font-weight:bold;
          padding:.5em 1em;
          margin: .2rem 0 .5rem;
          color:#fff;
          background-color:#002f87;
          text-decoration: none;
          border-radius:6px;
          text-align: center;
          display:inline-block;
          box-sizing:border-box;

          &:hover{background-color:#b2bfd7}
        }/* ENDS: Hoisted `Register` Link"-Button" */
    }/* LI */
}/* UL.event-list */

/* DETAILS Smooth-Open Rules  */
HTML {
  interpolate-size: allow-keywords;
}

/* Target the built-in content wrapper wrapper */
DETAILS::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  /* transition-behavior: allow-discrete handles the display toggling under the hood */
  transition: block-size 0.3s ease, opacity 0.3s ease, content-visibility 0.3s allow-discrete;
}

/* State when the details element is open */
DETAILS[open]::details-content {
  block-size: auto;
  opacity: 1;
}