/*
Theme Name: VizzionFX 
Theme URI: http://webvirtual.com.br/vizzionfx/
Author: VizzionFX Theme
Author URI: http://webvirtual.com.br/vizzionfx/
Description: We present you an Awesome Photography WordPress Theme. You can build a beautiful site, using 6 homepages. Much galleries, styles of blogs, and much much more make your site individual and creative.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vizzionfx.com
Template: vizzionfx.com

*/

/* 1) Register the font 
@font-face {
    font-family: "Hacker Noon V2";
    src: url("/wp-content/fonts/HackerNoonV2/a74050ab56fdcfa8a7288bc6d6512581.woff2") format("woff2"),
         url("/wp-content/fonts/HackerNoonV2/a74050ab56fdcfa8a7288bc6d6512581.woff") format("woff"),
         url("/wp-content/fonts/HackerNoonV2/a74050ab56fdcfa8a7288bc6d6512581.ttf") format("truetype"),
         url("/wp-content/fonts/HackerNoonV2/a74050ab56fdcfa8a7288bc6d6512581.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}*/

/* Remove the injected HOME heading only on homepage */
.home .heading-decor {
  display: none !important;
}


/* 2) Apply it globally */
html, body {
    font-family: "Hacker Noon V2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 3) (Optional) Force everything (plugins/themes that override) */
body * {
    font-family: "Hacker Noon V2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.lp-font-fix,
.lp-font-fix p{
  font-family: "Montserrat", sans-serif !important;
}

/* Posts (single + archives) -> always Montserrat */
.single-post .entry-content,
.single-post .entry-content *,

.blog .entry-content,
.blog .entry-content *,

.archive .entry-content,
.archive .entry-content *,

.category .entry-content,
.category .entry-content *,

.tag .entry-content,
.tag .entry-content * {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.single-post article,
.single-post article *,

.blog article,
.blog article *,

.archive article,
.archive article * {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.single-post .wp-block-post-content,
.single-post .wp-block-post-content *,

.blog .wp-block-post-content,
.blog .wp-block-post-content *,

.archive .wp-block-post-content,
.archive .wp-block-post-content * {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Title with Divider — force H4 to Hacker Noon */
.vfx-hacker-divider h4,
.vfx-hacker-divider .vc_sep_title h4,
.vfx-hacker-divider .wpb_heading,
.vfx-hacker-divider .vc_custom_heading {
  font-family: "Hacker Noon V2", "Hacker Noon", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  color: aqua !important;
}

/* Optional: line/divider styling (covers WPBakery variants) */
.vfx-hacker-divider .vc_sep_line,
.vfx-hacker-divider .vc_sep_holder .vc_sep_line,
.vfx-hacker-divider .wpb_separator,
.vfx-hacker-divider .vc_separator .vc_sep_line {
  border-color: currentColor !important; /* follows text color */
  opacity: 0.6;
}

/* Optional: if the element has a <span> wrapper for the title */
.vfx-hacker-divider .vc_sep_title span,
.vfx-hacker-divider .vc_sep_title {
  font-family: "Hacker Noon V2", "Hacker Noon", sans-serif !important;
}


.contact-row { font-family: Montserrat, sans-serif; }
.contact-row span { font-weight: 700; }

.copyright { font-family: Montserrat, sans-serif; }
.copyright .brand-hn { font-family: "Hacker Noon V2", Montserrat, sans-serif; }

/* LatePoint: force plugin typography only inside LatePoint */
.latepoint-w,
.latepoint-w h1,
.latepoint-w h2,
.latepoint-w h3,
.latepoint-w h4,
.latepoint-w h5,
.latepoint-w h6,
.latepoint-w p,
.latepoint-w span,
.latepoint-w div,
.latepoint-w a,
.latepoint-w label,
.latepoint-w small,
.latepoint-w li,
.latepoint-w strong,
.latepoint-w em {
  font-family: "latepoint", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Critical: form controls (themes often override these separately) */
.latepoint-w input,
.latepoint-w select,
.latepoint-w textarea,
.latepoint-w button,
.latepoint-w option {
  font-family: "latepoint", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Form controls specifically (most themes override these) */
.lp-font-fix .latepoint-w input,
.lp-font-fix .latepoint-w select,
.lp-font-fix .latepoint-w textarea,
.lp-font-fix .latepoint-w button,
.lp-font-fix .latepoint-w option,
.lp-font-fix .latepoint-w label {
  font-family: inherit !important;
}

/* Desktop only: shift LatePoint form wrapper left */
@media (min-width: 992px){
  .lp-font-fix{
    margin-left: -140px !important;
  }
}

/* Mobile/tablet: reset (safety) */
@media (max-width: 991.98px){
  .lp-font-fix{
    margin-left: 0 !important;
  }
}

/* Footer widget titles */
.site-footer .widget-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  font-family: "Hacker Noon V2", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* =========================================
   Footer social icons (ONLY in footer)
   Side-by-side, smaller, close together
   ========================================= */

/* Target the specific row in the footer that contains the social icons */
footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp){
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Remove Bootstrap column widths so they don't spread */
footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp) > [class*="col-"]{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================
   Portfolio rotator (Homepage "Latest Works")
   Important: DO NOT change the theme's original .a-img > div flow,
   because it is used to keep the tile height (Isotope needs it).
   We create an overlay stage (.vfx-stage) and animate layers there.
   ========================================= */

.vfx-portfolio-rotator .a-img {
  position: relative !important;
  overflow: hidden !important;
}

/* Keep the original inner div as a "sizer" (it preserves height).
   We hide it only AFTER our stage is created. */
.vfx-portfolio-rotator .a-img.vfx-has-stage > div.vfx-sizer {
  opacity: 0 !important;
}

.vfx-portfolio-rotator .a-img .vfx-stage {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  overflow: hidden;
}

.vfx-portfolio-rotator .a-img .vfx-stage .vfx-layer {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  transform: translateX(0);
  will-change: transform;
  transition: transform var(--vfx-anim, 450ms) ease;
}

.vfx-portfolio-rotator .a-img .vfx-stage .vfx-layer.vfx-current {
  transform: translateX(0);
}

.vfx-portfolio-rotator .a-img .vfx-stage .vfx-layer.vfx-next {
  transform: translateX(100%);
}

/* During animation */
.vfx-portfolio-rotator .a-img .vfx-stage .vfx-layer.vfx-slide-out {
  transform: translateX(-100%);
}

.vfx-portfolio-rotator .a-img .vfx-stage .vfx-layer.vfx-slide-in {
  transform: translateX(0);
}

/* Tighten icon box spacing + fix click area */
footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp) .icon-box{
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}
footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp) .icon-box > a{
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
}

/* Smaller square + smaller icon */
footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp) .icon{
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important; /* optional */
}

footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp) .icon i{
  font-size: 22px !important;
  line-height: 1 !important;
}

/* Mobile: keep inline, slightly smaller */
@media (max-width: 576px){
  footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp){
    gap: 8px !important;
  }
  footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp) .icon{
    width: 30px !important;
    height: 30px !important;
  }
  footer .icon-box-block.row:has(.fa-square-facebook, .fa-square-instagram, .fa-square-whatsapp) .icon i{
    font-size: 20px !important;
  }
}