/* VisionScaper theme – Tidewater Teal & Sun. All colors come from theme.json (Appearance > Editor > Styles). */
:root { --vs-radius: 14px; --vs-focus: #6D28D9; --vs-shadow: 0 1px 2px rgba(13,59,64,.08), 0 8px 24px rgba(13,59,64,.08); }
html { scroll-behavior: auto; }
body { -webkit-font-smoothing: antialiased; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--vs-focus); outline-offset: 2px; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
img { height: auto; max-width: 100%; }

/* ---------- header ---------- */
.vs-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--border); padding-inline: max(16px, 3vw); gap: 1rem; }
.admin-bar .vs-header { top: var(--wp-admin--admin-bar--height, 0px); }
.vs-logo { display: inline-flex; align-items: center; line-height: 0; min-height: 44px; }
.vs-logo-img { height: 38px; width: auto; }
.vs-logo-light { display: var(--wp--custom--logo--light, inline-block); }
.vs-logo-dark { display: var(--wp--custom--logo--dark, none); }
.vs-footer .vs-logo-light { display: none; } .vs-footer .vs-logo-dark { display: inline-block; }
.vs-nav { font-size: .98rem; }
.vs-nav .wp-block-navigation-item__content { padding: .65rem .7rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--wp--preset--color--contrast); border-radius: 10px; }
.vs-nav .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--highlight); }
.vs-nav .wp-block-navigation__submenu-container { border-radius: 12px; border: 1px solid var(--wp--preset--color--border); box-shadow: var(--vs-shadow); padding: .4rem; min-width: 260px; background: var(--wp--preset--color--surface); }
.vs-header-cta { margin: 0; flex-wrap: nowrap; }
.vs-header-cta .wp-block-button__link { white-space: nowrap; padding: .6rem 1.1rem; }
.vs-header-signin { font-weight: 700; padding: .65rem .7rem; text-decoration: none; }
@media (max-width: 781px) { .vs-header-signin, .vs-header-demo { display: none; } .vs-logo-img { height: 32px; } }
@media (min-width: 782px) and (max-width: 1099px) { .vs-header-demo { display: none; } }

/* ---------- sections ---------- */
.vs-section { padding-block: var(--wp--preset--spacing--60); padding-inline: max(16px, 4vw); }
.vs-section--tight { padding-block: var(--wp--preset--spacing--50); }
.vs-section--alt { background: var(--wp--preset--color--base-2); }
.vs-section--surface { background: var(--wp--preset--color--surface); }
.vs-section--deep, .vs-hero { background: linear-gradient(160deg, #0D3B40 0%, #0F5A5F 100%); color: #F2F6F3; }
.vs-section--deep h1, .vs-section--deep h2, .vs-section--deep h3, .vs-hero h1, .vs-hero h2, .vs-hero h3 { color: #fff; }
.vs-section--deep a:not(.wp-block-button__link), .vs-hero a:not(.wp-block-button__link) { color: #A8EDEA; }
.vs-hero { padding-block: clamp(2.5rem, 2rem + 5vw, 6rem); padding-inline: max(16px, 4vw); }
.vs-hero .vs-lead, .vs-section--deep .vs-lead { color: #D4E6E6; }
.vs-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 800; color: var(--wp--preset--color--brand); margin: 0 0 .5rem; }
.vs-hero .vs-eyebrow, .vs-section--deep .vs-eyebrow { color: #43C6C1; }
.vs-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); max-width: 42rem; }
.vs-center { text-align: center; } .vs-center .vs-lead { margin-inline: auto; }
.vs-hero .is-style-outline .wp-block-button__link, .vs-section--deep .is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }
.vs-hero .is-style-outline .wp-block-button__link:hover, .vs-section--deep .is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.12); color: #fff; }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--brand); border: 2px solid var(--wp--preset--color--brand); }
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--contrast); }
.vs-micro { font-size: .95rem; color: var(--wp--preset--color--muted); margin: .6rem 0 0; }
.vs-hero .vs-micro, .vs-section--deep .vs-micro { color: #B9D3D3; }
.vs-hero-cols { align-items: center; gap: clamp(1.5rem, 3vw, 3.5rem); }

/* proof strip */
.vs-proof { padding: 1.1rem max(16px,4vw); background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--border); }
.vs-proof ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; max-width: 1180px; font-weight: 700; color: var(--wp--preset--color--muted); font-size: .98rem; }
.vs-proof li::before { content: "✓ "; color: var(--wp--preset--color--brand); }

/* cards & grids */
.vs-grid { gap: 1.25rem; }
.vs-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--vs-radius); padding: 1.4rem; box-shadow: var(--vs-shadow); height: 100%; }
.vs-card > :first-child { margin-top: 0; } .vs-card > :last-child { margin-bottom: 0; }
.vs-card h3 { font-size: 1.2rem; margin: .5rem 0 .4rem; }
.vs-card p { color: var(--wp--preset--color--muted); margin: 0 0 .6rem; }
.vs-card .vs-more a { font-weight: 800; text-decoration: none; }
.vs-card .vs-more a::after { content: " →"; }
a.vs-card-link { text-decoration: none; color: inherit; display: block; }
.vs-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--brand); font-size: 1.35rem; margin: 0; }
.vs-card--flat { box-shadow: none; }
.vs-list-check { list-style: none; padding: 0; margin: .5rem 0; }
.vs-list-check li { padding-left: 1.7rem; position: relative; margin: .45rem 0; }
.vs-list-check li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--brand); font-weight: 900; }
.vs-steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vs-steps li { counter-increment: s; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--vs-radius); padding: 1.1rem 1.1rem 1.1rem 1.1rem; }
.vs-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--wp--preset--color--cta); color: #10161A; font-weight: 900; margin-bottom: .5rem; }
.vs-steps strong { display: block; font-size: 1.05rem; }
.vs-stats { gap: 1rem; text-align: center; }
.vs-stat-num { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem); font-weight: 900; line-height: 1; color: var(--wp--preset--color--brand); margin: 0; }
.vs-section--deep .vs-stat-num { color: #43C6C1; }
.vs-stat-label { margin: .35rem 0 0; color: var(--wp--preset--color--muted); }
.vs-section--deep .vs-stat-label { color: #D4E6E6; }
.vs-media { border-radius: 18px; overflow: hidden; border: 1px solid var(--wp--preset--color--border); box-shadow: 0 2px 4px rgba(13,59,64,.10), 0 18px 40px rgba(13,59,64,.18); background: var(--wp--preset--color--surface); margin: 0; }
.vs-media img { display: block; width: 100%; }
.vs-media figcaption { padding: .6rem .9rem; font-size: .9rem; color: var(--wp--preset--color--muted); background: var(--wp--preset--color--surface); }
.vs-split { align-items: center; gap: clamp(1.5rem, 3vw, 3.5rem); }
.vs-tag { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--brand); font-weight: 800; font-size: .82rem; }
.vs-crumbs { font-size: .92rem; margin: 0 0 .8rem; } .vs-crumbs a { color: inherit; }
.vs-hero .vs-crumbs { color: #B9D3D3; }
.vs-toc { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.vs-toc a { display: inline-block; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface); text-decoration: none; font-weight: 700; font-size: .95rem; min-height: 36px; }

/* faq */
.vs-faq details { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; margin: 0 0 .7rem; padding: 0; }
.vs-faq summary { cursor: pointer; font-weight: 800; padding: 1rem 1.2rem; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--wp--preset--color--brand); }
.vs-faq details[open] summary::after { content: "–"; }
.vs-faq details > :not(summary) { padding: 0 1.2rem; margin: 0 0 1rem; color: var(--wp--preset--color--muted); }

/* CTA band + inline CTA */
.vs-cta-band { text-align: center; }
.vs-cta-band .wp-block-buttons { justify-content: center; }
.vs-cta-inline { background: var(--wp--preset--color--highlight); border-radius: var(--vs-radius); padding: 1.4rem; margin-top: 2rem; }
.vs-notice { background: #FFF6D9; border-left: 4px solid #F6C445; padding: .9rem 1.1rem; border-radius: 8px; color: #10161A; }

/* footer */
.vs-footer { background: #0D3B40; color: #D4E6E6; padding-inline: max(16px, 4vw); }
.vs-footer a { color: #E6F2F1; text-decoration: none; } .vs-footer a:hover { text-decoration: underline; }
.vs-footer h2, .vs-footer h3, .vs-footer h4 { color: #fff; font-size: 1rem; letter-spacing: .02em; }
.vs-footer-cols { gap: 2rem; }
.vs-footer ul.wp-block-list, .vs-footer .vs-links { list-style: none; padding: 0; margin: 0; }
.vs-footer .vs-links li { margin: 0; } .vs-footer .vs-links a { display: inline-block; padding: .35rem 0; min-height: 32px; }
.vs-footer-legal { border-top: 1px solid rgba(255,255,255,.18); margin-top: 2rem; padding-top: 1.2rem; font-size: .9rem; gap: .6rem 1.5rem; flex-wrap: wrap; }
.vs-footer-legal a { text-decoration: underline; }

/* blog grid */
.vs-post-grid { gap: 1.25rem; }

/* tables */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { padding: .7rem .8rem; border-bottom: 1px solid var(--wp--preset--color--border); text-align: left; }
.wp-block-table th { background: var(--wp--preset--color--highlight); }

@media (max-width: 781px) {
  .vs-hero-cols, .vs-split { gap: 1.5rem; }
  .vs-section { padding-block: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- fixes after first render ---------- */
.vs-main:not(.vs-landing) { padding-inline: max(16px, 4vw); }
.vs-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vs-header .vs-nav { flex: 1 1 auto; min-width: 0; }
.vs-header .vs-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: .1rem; justify-content: flex-start; }
.vs-header .vs-nav .wp-block-navigation-item__content { white-space: nowrap; }
.vs-header-signin { white-space: nowrap; margin: 0; }
.vs-header-signin a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.vs-logo-img { height: 42px; }
.vs-hero .vs-lead, .vs-section--deep .vs-lead { margin-left: 0; margin-right: 0; }
.vs-center .vs-lead, .vs-cta-band .vs-lead { margin-left: auto; margin-right: auto; }
.vs-lead { font-size: 1.2rem; line-height: 1.55; }
@media (min-width: 1100px) { .vs-lead { font-size: 1.3rem; } }
.vs-hero-cols { flex-wrap: nowrap; }
@media (max-width: 781px) { .vs-hero-cols { flex-wrap: wrap; } }
.vs-landing .wp-block-post-content > *, .vs-landing .wp-block-post-content.is-layout-flow > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.vs-hero .vs-lead, .vs-section--deep .vs-lead, .vs-lead { margin-left: 0 !important; margin-right: 0 !important; }
.vs-center .vs-lead, .vs-cta-band .vs-lead { margin-left: auto !important; margin-right: auto !important; }

/* fixes after accessibility run: footer buttons keep dark text on yellow; header fits a 390px phone */
.vs-footer .wp-block-button:not(.is-style-outline) .wp-block-button__link, .vs-footer .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { color: var(--wp--preset--color--cta-ink, #10161A); text-decoration: none; }
.vs-footer .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; }
@media (max-width: 480px) { .vs-header { gap: .4rem; } .vs-header-cta .wp-block-button__link { padding: .5rem .8rem; font-size: .9rem; } .vs-logo-img { height: 28px; } }