html {
     overflow-x: hidden;
 }

 :root {
     --font-family-primary_type: sans-serif;
     --font-family-secondary_type: sans-serif;
     --font-family-tertiary_type: sans-serif;

 }

/* Iconify: prevent text flash before icons render */
iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

iconify-icon:not(:defined) {
    visibility: hidden;
}

span.iconify,
i.iconify {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
}

svg.iconify {
    vertical-align: middle;
}





 /* --- Menu visibility --- */

 @media (max-width: 1023px) {
     #nav-menu {
         opacity: 0;
         visibility: hidden;
         transform: scale(0.95);
         pointer-events: none;
     }

     #nav-menu.is-open {
         opacity: 1;
         visibility: visible;
         transform: scale(1);
         pointer-events: auto;
     }
 }

 @media (min-width: 1024px) {
     #nav-menu {
         position: static;
         inset: auto;
         height: auto;
         width: auto;

         padding-top: 0;
         justify-content: center;

         opacity: 1;
         visibility: visible;
         transform: none;
         pointer-events: auto;
     }
 }

 /* === Hamburger base === */
 #menu-toggle {
     background: none;
     border: none;
     cursor: pointer;
     transition: transform 0.3s ease;
 }


 /* lines */
 #menu-toggle .menu-line {
     position: absolute;
     left: 50%;
     top: 50%;

     width: 24px;
     height: 1px;
     background-color: #111;
     border-radius: 2px;

     transform: translate(-50%, -50%);
     transition: transform 0.2s ease, opacity 0.15s ease;
 }

 /* initial hamburger layout */
 #menu-toggle .menu-line.top {
     transform: translate(-50%, -8px);
 }

 #menu-toggle .menu-line.bot {
     transform: translate(-50%, 8px);
 }

 /* === OPEN STATE (hamburger → X) === */

 #menu-toggle.is-open .menu-line.top {
     transform: translate(-50%, -50%) rotate(45deg);
 }

 #menu-toggle.is-open .menu-line.mid {
     opacity: 0;
 }

 #menu-toggle.is-open .menu-line.bot {
     transform: translate(-50%, -50%) rotate(-45deg);
 }

 #menu-toggle.is-open {
     transform: scaleX(-1);
     transition: transform 0.5s ease;
 }




 section {
     background-color: rgb(var(--theme-color-body));
 }



 a {
     color: rgb(var(--text-color-default) / var(--tw-text-opacity, 1));
     font-family: var(--font-family-tertiary), var(--font-family-tertiary_type);
 }

 .nav-header-icon {
     color: rgb(var(--text-color-default) / var(--tw-text-opacity, 1));
     border-color: rgb(var(--text-color-default) / var(--tw-text-opacity, 1));
 }

 .nav-header-menu-button span {
     background-color: rgb(var(--text-color-default) / var(--tw-text-opacity, 1));
 }


 .app-header-transparent {
     background-color: transparent !important;
 }


 mark {
     background-color: rgb(var(--theme-color-primary)) !important;
 }

 .link-icon {
     margin-left: 5px;
     margin-right: 10px;
 }

 .fa {
     line-height: unset !important;
 }

 @media (max-width: 1024px) {
     html {
         scrollbar-width: none;
         /* Firefox */
     }

     html::-webkit-scrollbar {
         display: none;
         /* Chrome/Safari/Opera */
     }

     .navbar-nav {
         background-color: rgb(var(--theme-color-body));
     }
 }

 /* Ensure the first div inside <main> has top padding 
    This pushes the content down below the header */
 main>div:first-of-type section {
     padding-top: 140px;
 }

 /* Ensure the first div inside <main> has top padding 
    This pushes the content down below the header */
 main>div:first-of-type section.no-first-section-top-padding {
     padding-top: 0px !important;
 }

 .no-section-y-padding {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
 }

 .swiper-slide img {
     display: block;
     width: 100%;
 }


 /* Alternate image/text positions by row index on large screens */
 @media (min-width: 1024px) {
     .container>.row.alternate:nth-of-type(even) {
         flex-direction: row-reverse;
     }
 }



 .pointer-events-none {
     pointer-events: none !important;
 }

 .pointer-events-auto {
     pointer-events: auto !important;
 }

 .swiper-pagination-bullet-active {
     background-color: rgb(var(--theme-color-primary)) !important;
 }

 /* todo: magic number, otherwise sometimes the pagination bullets are cut off */
 .swiper .pagination {
     height: 45px !important;
 }

 /* should an image ever be bigger than the entire screen?? maybe add image size properties to image? */
 img,
 video {
     max-height: 100vh;
     margin: auto;
 }


 .section {
     padding-left: 20px;
     padding-right: 20px;
 }

 header {
     padding-left: 20px;
     padding-right: 20px;
 }

 footer {
     padding-left: 20px;
     padding-right: 20px;
     background-color: rgb(var(--theme-color-body));
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     color: rgb(var(--text-color-dark));
 }