/*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 */
.pgView {
  /* Configure */
  max-width: 100%;
  /* Suggested */
  margin: 1rem auto; /* Orig: 1rem auto */
  --minLogoHt: 75px;
  --subMenuHt: 50px;
  --vwMaxHt:calc(100vh - ( var(--minLogoHt,75px) + var(--subMenuHt,50px) ) );
}

/* The primary content */
.pgView > UL {
  /* Configure */
  border: 1px solid #767676;
  /* background: transparent; */
  /* Adjustable */
  max-height: var(--vwMaxHt, calc(100vh - 125px)); /* 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 */
.pgView > UL > LI {
  /* Configure */
  border-bottom: 1px solid #333;
}

/* Remove the extra bottom-border at the end of the list(s) */
.pgView > UL > LI:last-of-type/*, .pgView > UL > LI:nth-of-type(__n) is added by JS. */ {
  /* Recommended */
  border-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;
  /* Adjustable */
  --square: 1.8rem;
  margin: 0 0.25rem;
  padding: 0 .5rem;
  border: 1px solid #777;
  border-radius: 3px;
  /* 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) */
  /* Required */
  box-sizing: border-box; /* Maintains square when custom padding is factored in */
  position: relative; /* b/c child `::before` pseudo-elements will use "pos:abs" */
}

/* Expanding A-tag clickable region to the parent LI */
NAV.pagination > UL > LI > A:any-link::BEFORE {
  /* Required */
  content:"";position:absolute;
  top:0;right:0;bottom:0;left:0;
}

/* Make P8n-Navbar A-tags look 
 * [less like a hyperlink text and]
 * more like a BUTTON text */
NAV.pagination > UL > LI > A:any-link {
  /* Configure */
  color: navy; /* Fallback if !support( var() ) */
  color: var(--primaryColor, navy);
  /* Adjustable */
  text-transform: UPPERCASE;
  font-weight: bold;
  /* Recommended */
  text-decoration: none;
  text-align: center;
}

/* "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(A[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 > A:any-link[aria-current="page"] {
  color: #fff;
  cursor: default;
}

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

NAV.pagination > UL > LI > A:any-link:active {
  color: #FFF;
}

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

NAV.pagination > UL > LI:has(A:any-link[disabled]):hover,
NAV.pagination > UL > LI:has(A:any-link[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 > A:focus {
  /* Required */
  outline: none;
}

NAV.pagination > UL > LI > A: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;
}

/* "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 > 500px){
  UL.typedNav > LI > A:any-link.bkwd::AFTER,UL.typedNav > LI > A:any-link.frwd::BEFORE{
    /* Adjustable */
    --arrowMargin: .25rem;
    /* Essential */
    content: attr(title);
    display:inline-block;
  }

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

  UL.typedNav > LI > A:any-link[title*="Prev"]::AFTER{content:"Prev";}/* Shortening the label */
  
  UL.typedNav > LI > A:any-link.frwd::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 > A:any-link.frwd:focus-visible::BEFORE{
    outline:0;
  }

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

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

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

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

.wrkshp-cal > LI{border-bottom:2px solid #0006;padding:.5em .5em 1em;margin-bottom:0;position:relative;}

.wrkshp-cal > LI:last-child{border-bottom:0}

/* Instead of writing out "h1,h2,..,h7" I'm using ".wrkshp-cal > LI > :first-child" because the header "should" always be the first-child element */

.wrkshp-cal > LI > :first-child{margin:0 0 .5rem;font-size:1.35rem;}
.wrkshp-cal > LI > :first-child + EM::AFTER{content:"Read Description"; display:inline-block; font-size:.8rem; font-weight:normal; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; background:#e0e0e0; padding:.25rem .75rem;border-radius:.75rem; margin:6px 0 0 0}
.wrkshp-cal > LI:hover > :first-child + EM::AFTER{background:#777;color:#fff}
.wrkshp-cal > LI.noDesc:hover{cursor:default;}
.wrkshp-cal > LI.noDesc > :first-child + EM::AFTER{content:none}

.wrkshp-cal > LI > :first-child + EM:has(+DIV.show,+DIV.collapsing)::AFTER{content:"Hide Description"}

.wrkshp-cal > LI DIV.loc{margin-bottom:0.875rem;}

.wrkshp-cal > LI:hover > :first-child + EM:has(+DIV.show,+DIV.collapsing)::AFTER{background:#e0e0e0; color:#232323}
/* .wrkshp-cal > LI > :first-child + EM:has(+DIV.show,+DIV.collapsing)::AFTER:hover{background:#777 !important;color:#fff !important;} */

.wrkshp-cal > LI > :first-child + EM{display:block; margin:0 0 .5rem;}

.wrkshp-cal > LI > :first-child A,.wrkshp-cal > LI > A:last-child,.wrkshp-cal > LI > DIV A[title*='regist' i]{text-decoration:none;}

.wrkshp-cal > LI > :first-child A:hover{text-decoration:underline;}

.wrkshp-cal > LI > :first-child A:before{
  content:'';
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  z-index:0
}

.wrkshp-cal P A,.wrkshp-cal LI > A, .wrkshp-cal BUTTON{
  position:relative; z-index:1; margin-bottom:.5rem;
}

.wrkshp-cal .exp-btn{background:#eee;border:0;border-radius:.5rem; padding:.25rem .5rem; margin:0 .5rem .5rem;display:inline-block;}

.wrkshp-cal .exp-btn:hover{text-decoration:underline;}

.wrkshp-cal P A:hover{background:#3ab0c833;border-radius:4px}

.wrkshp-cal > LI > P{box-sizing:border-box; margin:0 0 .5rem;}

.wrkshp-cal > LI > A:last-child,.wrkshp-cal > LI > DIV A[title*='regist' i]{
  font-weight:bold;
  text-transform:uppercase;
  background-color:#002f87;
  color:#fff;
  padding:.5em 1em;
  display:inline-block;
  border-radius:6px;
  box-sizing:border-box;
  margin-top: .2rem;
  text-align: center;
}

.wrkshp-cal > LI > A:last-child:hover,
.wrkshp-cal > LI > DIV A[title*='regist' i]:hover
{background-color:#b2bfd7}