/* Marketing-page CSS overrides for static www pages (index.html and the blog).
   Loaded after vybit.css to override the SPA defaults that would otherwise
   hide scrolling, collapse layout, and reposition chrome on full-page static
   content. Not loaded by the SPA at app.vybit.net. */

/* Restore native body scrolling. vybit.css sets html/body to
   overflow:hidden + height:100% so the SPA can use nested scroll
   containers (.vscrollfull, .vdocbox). A static marketing page needs
   the body to scroll normally for crawlers, anchor navigation, mobile
   UX, and accessibility. */
html, body {
    overflow: visible !important;
    height: auto !important;
}

/* Undo the SPA's fixed-viewport-height containers so content flows
   naturally instead of being clipped to a tiny scrollable inner div. */
.vc, .vwww, .vwwwc, .vdocs, .vdocbox {
    height: auto !important;
}

/* Keep the page header visible while scrolling so users always have
   the brand + sign-in link in view. Override the SPA's padding-top:24px
   which shoves content flush to the bottom of the 56px header bar. */
.vheader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    padding: 14px 16px;
    height: 50px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Push page content below the fixed header. */
.vwww {
    padding-top: 50px;
}
.vheader-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.vheader-inner .maintitle {
    font-weight: bold;
    font-style: italic;
    font-size: 16px;
    text-align: center;
}
.vheader-inner .vheadright {
    position: absolute;
    right: 0;
}

/* Anchor-scroll targets need to land BELOW the sticky header instead
   of being hidden behind it. 60px is .vheader height + small buffer. */
.accordion-item {
    scroll-margin-top: 60px;
}

/* Hero headings: real h1/h2 for SEO, styled to be clean and
   prominent without being overpowering. */
.vtagline h1.vib {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    font-style: inherit;
    margin: 0 0 8px 0;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.vtagline h2.vib {
    display: block;
    font-size: 1.1rem;
    font-weight: normal;
    font-style: inherit;
    margin: 0 0 12px 0;
    line-height: 1.4;
    opacity: 0.85;
}

/* Value proposition subtitle below the hero taglines. */
.vtagline .vsubtitle {
    font-size: 0.9rem;
    font-style: normal;
    opacity: 0.75;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

/* Breathing room between hero, badges, and accordion. */
.vtagline {
    padding-top: 36px;
    padding-bottom: 20px;
}
.vstorelinks {
    padding-top: 8px;
    padding-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.vstorelinks > span {
    margin: 0;
}
.vstorelinks .vstore_image {
    height: 32px;
    width: auto;
}

/* Sign In as a subtle button instead of a plain text link. */
.vheadright a.vsignin {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 3px 12px 4px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: normal;
    color: white;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.15s ease;
}
.vheadright a.vsignin:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Footer: keep fixed at bottom (like the SPA) but override the
   height and styling for the marketing page content. */
.vfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1030;
    text-align: center;
    padding: 10px 0 12px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    background: linear-gradient(orange, darkorange);
}
/* Push page content above the fixed footer. */
.vdocbox {
    padding-bottom: 80px;
}

/* Route-specific intro block shown above the accordion on sub-pages. */
.vroute-intro {
    padding: 16px 20px;
    margin-bottom: 16px;
    background: rgba(255, 165, 0, 0.06);
    border-left: 3px solid orange;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
}
.vroute-intro h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.vroute-intro p {
    margin: 0;
}
.vroute-intro a {
    color: inherit;
    text-decoration: underline;
}
.vfooter .vfooter-logo {
    height: 28px;
    opacity: 0.5;
    margin-bottom: 8px;
}
.vfooter .vterms a {
    text-decoration: none;
}
.vfooter .vterms a:hover {
    text-decoration: underline;
}