/* Archive rules, loaded after the theme: what the old scripts set at runtime,
   and fallbacks so that every page works without JavaScript. */

/* The header is fixed (style.css); #wrapper starts below it. custom.js set
   this from the header height, as site.js does; this is the same value for
   pages without JavaScript (below 768px a theme rule sets it). */
#wrapper { padding-top: 75px; }

/* Back-to-top arrow: shown by site.js after 200px of scrolling. */
#toTop { visibility: hidden; }
#toTop.visible { opacity: 1; visibility: visible; }

/* "Since we started" parallax background (site.js, jarallax). */
html.js .parallax { position: relative; z-index: 0; }
.parallax_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
.parallax_image { position: fixed; top: 0; left: 0; overflow: hidden; pointer-events: none; background-position: 50% 50%; background-size: 100% auto; background-repeat: no-repeat; }

/* Without JavaScript: the menu icon links to #mobile_menu_panel, which opens like
   body.js_nav does (style.css, grandconference_custom_css.css); the X links to #. */
html:not(.js) .mobile_menu_wrapper:target { display: block; transform: translate(calc(100% - 360px), 0); right: 0; left: auto; overflow-y: scroll; overflow-x: hidden; }
html:not(.js) .mobile_menu_wrapper:target #mobile_menu_close.button { transform: scale(1); }
@media only screen and (max-width: 767px) {
  html:not(.js) .mobile_menu_wrapper:target { transform: translate(calc(100% - 270px), 0); }
}

/* Without JavaScript: event details and FAQ answers are open, and the
   schedule filter and "Expand All +", which need JavaScript, are hidden. */
html:not(.js) .scheduleday_wrapper li .session_content_extend.hide { display: block; }
html:not(.js) .ui-accordion .ui-accordion-content { display: block; }
html:not(.js) .session_filters,
html:not(.js) .session_expand_all { display: none; }

/* Login, the newsletter form and the contact form are shown but do nothing
   (build.py: no link, no <form>, every field disabled). Hovering Login, a
   contact field, the Send button or the newsletter fields shows the note in
   their data-note, just below them. */
.archive-disabled, .archive-disabled * { cursor: not-allowed; }
[data-note] { position: relative; }
[data-note]::after {
  content: attr(data-note);
  display: none;
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 1000;
  padding: 6px 10px; border-radius: 6px; background: #17315D; color: #ffffff;
  font: 500 13px/1.4 "Work Sans", Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap;
  pointer-events: none;
}
[data-note]:hover::after { display: block; }
/* In the narrow mobile menu the note starts under "Login" and may wrap. */
.mobile_main_nav [data-note]::after { top: 100%; left: 0; transform: none; white-space: normal; max-width: 100%; }
