/* Base styles for elements made in the site builder (sitebuilder.php). The template's own classes
   (styles.css, portal.css) do the rest; each element's settings are written as .sb-<id> rules. */

.sb-t-image { max-width: 100%; height: auto; }
.sb-img-link { display: block; }
.sb-t-spacer { height: 40px; }
.sb-t-divider { border: 0; border-top: 1px solid currentColor; opacity: 0.2; margin: 24px 0; }
.sb-t-video { display: block; max-width: 100%; }
.sb-t-icon { flex: none; }
.sb-t-text > :first-child { margin-top: 0; }
.sb-t-text > :last-child { margin-bottom: 0; }
.sb-t-text img { max-width: 100%; }

.sb-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.sb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sb-t-box:has(> .sb-bg-video) { position: relative; overflow: hidden; }
.sb-bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sb-bg-video video { width: 100%; height: 100%; object-fit: cover; }
.sb-bg-video ~ * { position: relative; z-index: 1; }

:where(a.sb-t-box) { display: block; color: inherit; text-decoration: none; } /* :where = no specificity, so template classes win */
.sb-logo-hero { display: contents; }

/* Menus: one level of drop-down items. */
.sb-menu-group { position: relative; display: inline-flex; align-items: center; }
.sb-submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 190px;
  flex-direction: column; gap: 2px; padding: 8px; border-radius: 12px;
  background: var(--night-2, #0b1224); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.sb-submenu a { padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.sb-submenu a::after { display: none !important; }
.sb-submenu a:hover { background: rgba(255, 255, 255, 0.08); }
.sb-menu-group:hover > .sb-submenu,
.sb-menu-group:focus-within > .sb-submenu { display: flex; }
@media (max-width: 980px) {
  .sb-menu-group { display: flex; flex-direction: column; align-items: stretch; }
  .sb-submenu { position: static; display: flex; background: none; box-shadow: none; padding: 0 0 0 16px; }
}
.sb-footer-menu { display: flex; flex-wrap: wrap; gap: 18px; }

/* Shown only in the editor. */
.sb-placeholder {
  display: grid; place-items: center; min-height: 120px; padding: 18px; border: 2px dashed rgba(127, 127, 127, 0.5);
  border-radius: 10px; color: rgba(127, 127, 127, 0.9); font: 600 14px/1.4 system-ui, sans-serif; text-align: center;
}