/* Value First Sales — brand overrides for the blockskit-agency theme */

body{margin:0;background:#F7F8FA;font-family:'Lato',sans-serif;color:#344054;overflow-x:clip !important;overflow-y:visible !important;}

/* Scoped to .wp-site-blocks (not a blanket tag selector) so this never reaches
   #wpadminbar, which WordPress renders as a sibling outside our site content —
   an earlier blanket "span{font-family:...!important}" was overriding the
   dashicons font on the admin bar's icon spans, breaking them for logged-in users. */
.wp-site-blocks p,.wp-site-blocks li,.wp-site-blocks span,.wp-site-blocks label,
.wp-site-blocks input,.wp-site-blocks textarea,.wp-site-blocks button,.wp-site-blocks select,
.wp-site-blocks h1,.wp-site-blocks h2,.wp-site-blocks h3,.wp-site-blocks h4,.wp-site-blocks h5,.wp-site-blocks h6,
.wp-site-blocks a,.wp-site-blocks .wp-block-post-title,.wp-site-blocks .wp-block-heading{
  font-family:'Lato',sans-serif !important;
}

a{color:#7C5CFF;text-decoration:none;}
a:hover{color:#101828;}

header.wp-block-template-part{position:sticky;top:0;z-index:50;background:#F7F8FA;}
footer.wp-block-template-part{background:#FFFFFF;}

/* Header/footer navigation (core/navigation, ref'd to the shared "Primary" menu).
   core/navigation has no per-instance blockGap set in either pattern, so it
   falls back to theme.json's sitewide default (preset "small" = 24px) for
   item-to-item spacing — close enough to pass unnoticed on the horizontal
   header nav (target 26px) but way too loose on the footer's stacked SITE
   menu (target 10px), so both get an explicit gap below rather than relying
   on that shared fallback. */
.vfs-util-bar{gap:24px;}
.vfs-header-row{max-width:1264px;width:100%;margin:0 auto;padding:14px 32px;box-sizing:border-box;align-items:center;gap:20px;border-bottom:1px solid #E4E7EC;}
.vfs-header-row > .wp-block-group:first-child{gap:12px;align-items:center;}
.vfs-nav-cta{align-items:center;gap:26px;}
.vfs-header-row .wp-block-navigation__container{gap:26px;}
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content{color:#7C5CFF;}
.vfs-grid-3{gap:32px;max-width:1264px;margin:0 auto;box-sizing:border-box;align-items:flex-start;}
.vfs-grid-3 .wp-block-navigation__container{gap:10px;}
.vfs-grid-3 > *{flex:1 1 200px;}
.vfs-grid-3 > *:nth-child(1){flex-grow:1.4;}
.vfs-grid-3 > *:nth-child(2){flex-grow:0.8;}
.vfs-grid-3 > *:nth-child(3){flex-grow:1;}
.vfs-grid-3 > *:nth-child(4){flex-grow:0.9;}
.vfs-footer-desc{max-width:280px;margin-top:16px !important;}
.vfs-footer-bottom{border-top:1px solid #E4E7EC;}

/* Footer social icon: design comp uses an outlined text-badge (34px circle,
   1.5px border, service initials) rather than WP's default brand-colored
   icon+SVG. Hide the SVG and print the initials via ::before so the a11y
   label (.wp-block-social-link-label) stays intact for screen readers. */
.vfs-follow-col .wp-block-social-links{gap:10px;}
.vfs-follow-col .wp-block-social-link{width:34px;height:34px;}
.vfs-follow-col .wp-social-link-linkedin{background:#FFFFFF;border:1.5px solid #E4E7EC;}
.vfs-follow-col .wp-block-social-link-anchor{width:100%;height:100%;padding:0;justify-content:center;}
.vfs-follow-col .wp-block-social-link-anchor svg{display:none;}
.vfs-follow-col .wp-social-link-linkedin .wp-block-social-link-anchor::before{content:"in";font-size:10px;font-weight:700;color:#101828;line-height:1;}
/* RSS has no initials, so it keeps its SVG glyph inside the same badge. Color
   (not fill) sets the glyph: core's fill:currentColor rule outranks us here. */
.vfs-follow-col .wp-social-link-feed{background:#FFFFFF;border:1.5px solid #E4E7EC;color:#101828;}
.vfs-follow-col .wp-social-link-feed .wp-block-social-link-anchor svg{display:block;width:15px;height:15px;}

/* Hero (core/cover): photo occupies the right 47%, gradient fades across the full width.
   47% (down from 55%) drops the image box's aspect ratio below the photo's own (1976/1280),
   so object-fit:cover switches from cropping top/bottom to showing the full photo height —
   that's what reveals its natural margin above/below the wordmark as visible spacing. */
.vfs-hero-cover{background-color:#101828;}
.vfs-hero-cover .wp-block-cover__image-background{width:47%;left:auto;right:0;}
/* 1264px = 1200px content + 2x32px padding, so text aligns with other sections at x=120 on a 1440 viewport.
   140px top/bottom (up from 80px) adds extra height so the now-narrower image doesn't render small. */
.vfs-hero-inner{max-width:1264px;width:100%;margin:0 auto;padding:140px 32px;box-sizing:border-box;}
.vfs-hero-text{max-width:min(680px, calc(56vw - 32px));}
.vfs-hero-text .wp-block-buttons{gap:16px;}

/* Block-editor content helpers */
/* !important needed: core's .wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px} outranks this selector */
.vfs-eyebrow-line.wp-block-separator{width:32px !important;min-width:32px;height:2px;margin:0;border:none;opacity:1;}
.vfs-bullet-list{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:14px;}
.vfs-bullet-list li{font-size:14.5px;line-height:1.5;padding-left:16px;border-left:2px solid #7C5CFF;}
.vfs-arrow-link{font-weight:700 !important;font-size:14px !important;}
.vfs-arrow-link a{color:#7C5CFF !important;}

/* Query Loop cards (Home teaser / Articles listing / Related articles) */
.vfs-post-grid.is-layout-grid{gap:24px;}
.vfs-post-card{border:1px solid #E4E7EC;border-radius:6px;overflow:hidden;background:#FFFFFF;}
.vfs-post-card .wp-block-post-featured-image{margin:0;}
.vfs-post-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.vfs-card-content{flex:1;}
.vfs-post-card .wp-block-post-terms{flex:1 1 auto;min-width:0;}
.vfs-post-category{font-weight:700 !important;font-size:10.5px !important;letter-spacing:1.2px;color:#7C5CFF !important;text-transform:uppercase;}
.vfs-post-category a{color:#7C5CFF !important;}
.vfs-post-dot{color:#D0D5DD;}
.vfs-post-date{font-size:12px !important;color:#667085 !important;}
.vfs-post-date time{color:#667085;}
.vfs-post-title{font-weight:900 !important;color:#101828 !important;line-height:1.3 !important;margin:0 !important;}
.vfs-post-title a{color:#101828 !important;}
.vfs-post-excerpt{font-size:14px !important;line-height:1.6 !important;color:#667085 !important;margin:0 !important;flex:1 !important;}
.vfs-read-more{font-weight:700 !important;font-size:13px !important;color:#101828 !important;}
.vfs-article-hero-img img{object-position:top;}
.vfs-read-more a{color:#101828 !important;}

/* Query pagination (core/query-pagination on the Articles listing, scoped via .vfs-pagination
   so it doesn't restyle the default pagination on other stock theme templates) */
.vfs-pagination{margin-top:48px;gap:8px;}
.vfs-pagination .wp-block-query-pagination-numbers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.vfs-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:40px;height:40px;padding:0 6px;border:1px solid #E4E7EC;border-radius:6px;background:#FFFFFF;color:#101828;font-weight:700;font-size:13.5px;text-decoration:none;}
.vfs-pagination a.page-numbers:hover{border-color:#7C5CFF;color:#7C5CFF;background:#F7F8FA;}
.vfs-pagination .page-numbers.current{background:#7C5CFF;border-color:#7C5CFF;color:#FFFFFF;}
.vfs-pagination .page-numbers.dots{border-color:transparent;background:transparent;color:#667085;font-weight:400;}
.vfs-pagination .wp-block-query-pagination-previous,
.vfs-pagination .wp-block-query-pagination-next{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;height:40px;padding:0 18px;border:1px solid #E4E7EC;border-radius:6px;background:#FFFFFF;color:#101828;font-weight:700;font-size:13.5px;text-decoration:none;}
.vfs-pagination .wp-block-query-pagination-previous:hover,
.vfs-pagination .wp-block-query-pagination-next:hover{border-color:#7C5CFF;color:#7C5CFF;background:#F7F8FA;}

/* Articles sidebar (Search / Categories / Archive / Recent Posts / Tags / Follow) */
.vfs-sidebar-col{display:flex;flex-direction:column;gap:20px;}
.vfs-sidebar-card{border:1px solid #E4E7EC;border-radius:6px;background:#FFFFFF;padding:24px;box-sizing:border-box;}
.vfs-sidebar-label{margin:0 0 14px;font-weight:700;font-size:11px;letter-spacing:1px;color:#101828;text-transform:uppercase;}

.vfs-sidebar-search .wp-block-search__inside-wrapper{display:flex;align-items:center;border:1px solid #E4E7EC;border-radius:4px;background:#FFFFFF;overflow:hidden;}
.vfs-sidebar-search .wp-block-search__input{flex:1;min-width:0;border:none;background:transparent;padding:10px 12px;font-size:13.5px;color:#101828;outline:none;}
.vfs-sidebar-search .wp-block-search__button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;background:#7C5CFF;color:#FFFFFF;cursor:pointer;}
.vfs-sidebar-search .wp-block-search__button svg{fill:currentColor;width:16px;height:16px;}
.vfs-sidebar-search .wp-block-search__button:hover{background:#101828;}

.vfs-sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.vfs-sidebar-list li{font-size:13.5px;color:#9CA3AF;}
.vfs-sidebar-list a{color:#344054;text-decoration:none;font-weight:500;}
.vfs-sidebar-list a:hover{color:#7C5CFF;}

.vfs-sidebar-recent .wp-block-latest-posts__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.vfs-sidebar-recent .wp-block-latest-posts__post-title{display:block;font-size:13.5px;font-weight:700;color:#101828;text-decoration:none;line-height:1.4;margin-bottom:4px;}
.vfs-sidebar-recent .wp-block-latest-posts__post-title:hover{color:#7C5CFF;}
.vfs-sidebar-recent time.wp-block-latest-posts__post-date{font-size:11.5px;color:#9CA3AF;}

.vfs-sidebar-tags{display:flex;flex-wrap:wrap;gap:8px;}
.vfs-sidebar-tags a{font-size:12px !important;font-weight:700;color:#101828;background:#F7F8FA;border:1px solid #E4E7EC;border-radius:100px;padding:6px 12px;text-decoration:none;}
.vfs-sidebar-tags a:hover{border-color:#7C5CFF;color:#7C5CFF;}

/* Contact Form 7 */
.vfs-contact-form-wrap .wpcf7-form-control-wrap{display:block;}
.vfs-contact-form-wrap .vfs-field{margin-bottom:16px;}
.vfs-contact-form-wrap .vfs-field p{margin:0;}
.vfs-contact-form-wrap .vfs-field br{display:none;}
.vfs-contact-form-wrap label{display:block;font-weight:700;font-size:12.5px;color:#101828;margin-bottom:6px;}
/* !important on background/color/border: GoDaddy's Site Designer injects a
   higher-specificity "contrast fallback" stylesheet (body .wp-site-blocks
   input:not(...):not(...)...) on the live site only, recoloring every form
   field. Not present in local dev; ceiling breaks if GD adds !important too. */
.vfs-contact-form-wrap .wpcf7-form-control{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #E4E7EC !important;border-radius:4px;font-family:'Lato',sans-serif;font-size:14px;background:#FFFFFF !important;color:#344054 !important;}
.vfs-contact-form-wrap textarea.wpcf7-form-control{resize:vertical;}
.vfs-contact-form-wrap input[type="submit"].wpcf7-form-control{width:auto;background:#7C5CFF !important;color:#FFFFFF !important;font-weight:700;padding:14px 28px;border:none !important;cursor:pointer;}
.vfs-contact-form-wrap input[type="submit"].wpcf7-form-control:hover{background:#101828 !important;}
.vfs-contact-form-wrap .wpcf7-not-valid-tip{color:#FF5152;font-size:12.5px;margin-top:4px;}
.vfs-contact-form-wrap .wpcf7-response-output{border-radius:4px;font-size:13.5px;}
.vfs-thanks-card{display:none;border:1px solid #E4E7EC;border-radius:6px;padding:48px 32px;background:#FFFFFF;text-align:center;}
.vfs-thanks-card.vfs-visible{display:block;}
.vfs-contact-form-wrap.vfs-hidden{display:none;}

/* Layout helpers.
   These live here rather than as inline styles: Gutenberg validates a block's
   saved markup against its attributes, and CSS properties that no block
   attribute can declare (max-width, grid-template-columns, word-break,
   object-position) make the block report "invalid content" in the editor. */
.vfs-lede{margin-left:auto;margin-right:auto;text-align:center;}
.vfs-lede-480{max-width:480px !important;}
.vfs-lede-560{max-width:560px !important;}
.vfs-lede-600{max-width:600px !important;}
.vfs-quote-narrow{max-width:720px !important;margin-left:auto;margin-right:auto;}
.vfs-break-all{word-break:break-all;}
.vfs-img-top img{object-position:top;}
.vfs-contact-grid{max-width:1000px !important;margin-left:auto;margin-right:auto;grid-template-columns:0.8fr 1.2fr !important;}

/* core/navigation hardcodes its own overlay/hamburger breakpoint at 600px
   (see wp-includes/blocks/navigation/style.min.css), which only covers
   phones. Between 600-890px the header nav has nowhere near enough room
   (logo + 5 links + button need ~1000px) and wraps to a second row instead
   of collapsing, so the toggle is forced open through the whole tablet
   range instead. */
@media (max-width: 1024px){
  .vfs-header-row .wp-block-navigation__responsive-container-open{display:flex !important;}
  .vfs-header-row .wp-block-navigation__responsive-container:not(.is-menu-open){display:none !important;}
}

/* Below core/navigation's own 600px hamburger breakpoint, the tagline next
   to the logo leaves too little room for the hamburger + Book a Call button
   to fit on the same line, so they wrap to a second row under the logo. */
@media (max-width: 600px){
  .vfs-header-tagline{display:none;}
}

@media (max-width: 960px){
  .vfs-grid-3 > *{flex-basis:45%;}
  /* Once the logo column grows past the description's own 280px max-width
     (true from this breakpoint down through mobile), core's "constrained"
     layout centers it via margin-left/right:auto !important — override
     back to left-aligned to match the logo and the other columns. */
  .vfs-footer-desc{margin-left:0 !important;}
  /* .vfs-hero-text's calc(56vw - 32px) max-width and the image's fixed 55vw
     stop fitting side by side below ~1050px, so the image overlaps the
     text — drop it in favor of the solid background from this breakpoint
     down (previously only happened below 760px, leaving a broken range). */
  .vfs-hero-cover .wp-block-cover__image-background{display:none !important;}
  .vfs-hero-cover .wp-block-cover__background{background:#101828 !important;}
  .vfs-hero-text{max-width:100% !important;}
}

@media (max-width: 760px){
  .vfs-grid-2{grid-template-columns:1fr !important;}
  .vfs-grid-3 > *{flex-basis:100%;}
  .vfs-post-grid.is-layout-grid{grid-template-columns:1fr !important;}
  .vfs-pagination .wp-block-query-pagination-previous,
  .vfs-pagination .wp-block-query-pagination-next{padding:0 14px;font-size:12.5px;gap:6px;}
  .vfs-pagination .page-numbers{min-width:36px;height:36px;font-size:12.5px;}
  .vfs-section{padding:56px 20px !important;}
  .vfs-h1{font-size:30px !important;}
  .vfs-util-bar{justify-content:center !important;}
  .vfs-contact-grid{grid-template-columns:1fr !important;}
}