/* Engine additions to the real Vertex stylesheet (main.css): what the original did with its scripts or the WordPress runtime,
   plus the accessibility the original lacks. */
[hidden] { display: none !important; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #fff; color: #000; padding: 8px 14px; }
.skip-link:focus { left: 8px; top: 8px; clip: auto; clip-path: none; width: auto; height: auto; margin: 0; }
a:focus-visible, .mobile_nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* the loop thumbnail is the theme's 640x280 crop; a post whose crop was missing live shows the full image */
.thumbnail img.vx-thumb { width: 100%; height: auto; aspect-ratio: 640 / 280; object-fit: cover; }
.thumbnail img.vx-thumb.vx-thumb-full { aspect-ratio: auto; object-fit: initial; }
.member-image img { border-radius: 60px; display: block; }
/* sub-menus: the original lets Superfish set display:block on hover; here CSS does it, on hover and on keyboard focus (the original CSS places them) */
.nav li:hover > ul, .nav li:focus-within > ul { display: block; }
ul.nav li:hover > ul, ul.nav li:focus-within > ul { left: -19px; top: 48px; }
ul.nav li li:hover > ul, ul.nav li li:focus-within > ul { left: 238px; top: -10px; }
/* a footer column whose widgets are not reproduced (comments, meta) keeps its place */
.footer-widget:empty { min-height: 1px; }
.et_mobile_menu { position: absolute; }
.mobile_nav_wrap { position: relative; display: inline-block; }
/* without JavaScript the header block must not stay faded out and the main menu stays reachable on small screens */
html:not(.js) .et-scroll-animations #top-area .tagline,
html:not(.js) .et-scroll-animations #top-area .action-button,
html:not(.js) .et-scroll-animations #et-slides { opacity: 1; }
/* without JavaScript the slides do not stack: only the first shows */
html:not(.js) .et-slide:nth-child(n+2) { display: none; }
@media (max-width: 767px) {
  html:not(.js) #top-menu nav { display: block; }
  html:not(.js) #et_mobile_nav_menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
/* phones (deliberate, mobile usability): long words in titles and bodies break instead of pushing the page sideways */
@media (max-width: 767px) {
  .alt-description h2, .description h2, .entry, #sidebar a, #footer-widgets a { overflow-wrap: anywhere; }
  #main-area img, #main-area video, #main-area table { max-width: 100%; }
}
/* phones (deliberate): the slider arrows hang 60-80px outside the 280px column and made the page scroll sideways; keep them inside the screen */
@media (max-width: 479px) {
  .et-arrow-prev, .et-slider-area:hover .et-arrow-prev { left: calc(-1 * min(45px, (100vw - 280px) / 2 - 3px)); }
  .et-arrow-next, .et-slider-area:hover .et-arrow-next { right: calc(-1 * min(45px, (100vw - 280px) / 2 - 3px)); }
}
/* the original prints an empty h1 + h2 here (12px of padding); an empty heading is bad for screen readers, so only the space is kept */
.home-block header.vx-empty { height: 12px; }