/* WP2Static — FontAwesome icon fallback CSS
   Avada's UCSS strips most icon rules. This file ensures phone/email/social
   icons render correctly on every page. */

/* @font-face — point to existing webfont files */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff") format("woff"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-brands-400.woff") format("woff"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-brands-400.ttf") format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-regular-400.woff") format("woff"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
}

/* Base classes */
.fa, .fas, .fa-solid, .far, .fa-regular, .fab, .fa-brands,
[class^="fa-"]:before, [class*=" fa-"]:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.fa, .fas, .fa-solid { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.far, .fa-regular   { font-family: "Font Awesome 6 Free"; font-weight: 400; }
.fab, .fa-brands    { font-family: "Font Awesome 6 Brands"; font-weight: 400; }

/* Most-common solid icons */
.fa-phone:before, .fa-phone-alt:before { content: "\f095"; }
.fa-phone-square:before              { content: "\f098"; }
.fa-envelope:before, .fa-mail:before { content: "\f0e0"; }
.fa-envelope-open:before             { content: "\f2b6"; }
.fa-map-marker-alt:before, .fa-location-dot:before { content: "\f3c5"; }
.fa-map-marker:before                { content: "\f041"; }
.fa-home:before, .fa-house:before    { content: "\f015"; }
.fa-user:before                      { content: "\f007"; }
.fa-users:before                     { content: "\f0c0"; }
.fa-search:before, .fa-magnifying-glass:before { content: "\f002"; }
.fa-bars:before, .fa-menu:before     { content: "\f0c9"; }
.fa-times:before, .fa-xmark:before, .fa-close:before { content: "\f00d"; }
.fa-chevron-down:before              { content: "\f078"; }
.fa-chevron-up:before                { content: "\f077"; }
.fa-chevron-left:before              { content: "\f053"; }
.fa-chevron-right:before             { content: "\f054"; }
.fa-angle-down:before                { content: "\f107"; }
.fa-angle-up:before                  { content: "\f106"; }
.fa-angle-left:before                { content: "\f104"; }
.fa-angle-right:before               { content: "\f105"; }
.fa-arrow-down:before                { content: "\f063"; }
.fa-arrow-up:before                  { content: "\f062"; }
.fa-arrow-left:before                { content: "\f060"; }
.fa-arrow-right:before               { content: "\f061"; }
.fa-arrow-alt-circle-down:before, .fa-circle-arrow-down:before { content: "\f358"; }
.fa-check:before                     { content: "\f00c"; }
.fa-plus:before                      { content: "\2b"; }
.fa-minus:before                     { content: "\f068"; }
.fa-star:before                      { content: "\f005"; }
.fa-heart:before                     { content: "\f004"; }
.fa-clock:before                     { content: "\f017"; }
.fa-calendar:before                  { content: "\f133"; }
.fa-cog:before, .fa-gear:before      { content: "\f013"; }
.fa-info-circle:before, .fa-circle-info:before { content: "\f05a"; }
.fa-question-circle:before           { content: "\f059"; }
.fa-exclamation-circle:before        { content: "\f06a"; }
.fa-globe:before                     { content: "\f0ac"; }
.fa-print:before                     { content: "\f02f"; }
.fa-download:before                  { content: "\f019"; }
.fa-upload:before                    { content: "\f093"; }
.fa-share:before, .fa-share-alt:before, .fa-share-nodes:before { content: "\f1e0"; }
.fa-link:before                      { content: "\f0c1"; }
.fa-external-link:before, .fa-external-link-alt:before, .fa-arrow-up-right-from-square:before { content: "\f08e"; }
.fa-spin                             { animation: fa-spin 2s linear infinite; }
.fa-shopping-cart:before, .fa-cart-shopping:before { content: "\f07a"; }
.fa-bag-shopping:before, .fa-shopping-bag:before { content: "\f290"; }
.fa-comment:before                   { content: "\f075"; }
.fa-comments:before                  { content: "\f086"; }
.fa-image:before                     { content: "\f03e"; }
.fa-camera:before                    { content: "\f030"; }
.fa-video:before                     { content: "\f03d"; }
.fa-bell:before                      { content: "\f0f3"; }
.fa-bookmark:before                  { content: "\f02e"; }
.fa-eye:before                       { content: "\f06e"; }
.fa-pencil:before, .fa-pen:before    { content: "\f303"; }
.fa-edit:before, .fa-pen-to-square:before { content: "\f044"; }
.fa-trash:before                     { content: "\f1f8"; }
.fa-save:before, .fa-floppy-disk:before { content: "\f0c7"; }
.fa-folder:before                    { content: "\f07b"; }
.fa-file:before                      { content: "\f15b"; }
.fa-lock:before                      { content: "\f023"; }
.fa-unlock:before                    { content: "\f09c"; }
.fa-quote-left:before                { content: "\f10d"; }
.fa-quote-right:before               { content: "\f10e"; }
.fa-play:before                      { content: "\f04b"; }
.fa-pause:before                     { content: "\f04c"; }
.fa-stop:before                      { content: "\f04d"; }
.fa-music:before                     { content: "\f001"; }
.fa-bolt:before                      { content: "\f0e7"; }
.fa-fire:before                      { content: "\f06d"; }
.fa-rocket:before                    { content: "\f135"; }
.fa-gift:before                      { content: "\f06b"; }
.fa-shield:before, .fa-shield-alt:before, .fa-shield-halved:before { content: "\f3ed"; }
.fa-mobile:before, .fa-mobile-screen-button:before { content: "\f3cd"; }
.fa-tablet:before                    { content: "\f10a"; }
.fa-desktop:before                   { content: "\f108"; }
.fa-database:before                  { content: "\f1c0"; }
.fa-cloud:before                     { content: "\f0c2"; }
.fa-wifi:before                      { content: "\f1eb"; }

/* Brand icons (social) */
.fa-facebook:before, .fa-facebook-f:before { content: "\f39e"; }
.fa-facebook-square:before, .fa-square-facebook:before { content: "\f082"; }
.fa-twitter:before, .fa-x-twitter:before  { content: "\f099"; }
.fa-instagram:before                       { content: "\f16d"; }
.fa-linkedin:before, .fa-linkedin-in:before { content: "\f0e1"; }
.fa-youtube:before                         { content: "\f167"; }
.fa-pinterest:before, .fa-pinterest-p:before { content: "\f231"; }
.fa-pinterest-square:before                { content: "\f0d3"; }
.fa-tumblr:before                          { content: "\f173"; }
.fa-whatsapp:before                        { content: "\f232"; }
.fa-google:before                          { content: "\f1a0"; }
.fa-google-plus:before, .fa-google-plus-g:before { content: "\f0d5"; }
.fa-reddit:before                          { content: "\f1a1"; }
.fa-snapchat:before                        { content: "\f2ab"; }
.fa-tiktok:before                          { content: "\e07b"; }
.fa-telegram:before                        { content: "\f2c6"; }
.fa-github:before                          { content: "\f09b"; }
.fa-vimeo:before, .fa-vimeo-v:before       { content: "\f27d"; }
.fa-skype:before                           { content: "\f17e"; }
.fa-discord:before                         { content: "\f392"; }
.fa-twitch:before                          { content: "\f1e8"; }

@keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Search icon visibility — make sure search trigger is clickable even if icon font fails */
.fusion-main-menu-search a, .fusion-main-menu-icon[aria-label="Search"] {
    display: inline-block; min-width: 24px; min-height: 24px;
    position: relative;
}
.fusion-main-menu-search a:before, .fusion-main-menu-icon[aria-label="Search"]:before {
    content: "\f002";  /* magnifying glass */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    display: inline-block;
}

/* Ensure social icon links have visible click area even if font fails to load */
.fusion-social-networks a, .fusion-social-networks-icons a,
.fusion-social-links a {
    display: inline-block; min-width: 32px; min-height: 32px;
    margin: 0 4px;
}

/* Fix: three Elementor "image-carousel" (Swiper) widgets on the
   homepage — Associated Architects, and the Construction/Development
   Featured Portfolio sections — never rendered on this static export.
   Swiper needs its own JS to lay out and cycle slides; without it,
   multi-slide carousels either show nothing (Associated Architects,
   14 logos, slides_to_show:5 → empty) or only the first slide
   (Portfolio sections, slides_to_show:2 → looked like 1 image
   missing). All real images were present in the source, just never
   escaping the broken swiper-wrapper. Replaced the carousel markup
   itself with plain static grids below — same fix pattern already
   used on another client's flaky product carousel. */
.htc-architects-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px 48px;
}
.htc-architects-grid-item img {
    max-width: 140px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter .25s ease, opacity .25s ease;
}
.htc-architects-grid-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.htc-portfolio-grid-con,
.htc-portfolio-grid-dev {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.htc-portfolio-grid-con-item img,
.htc-portfolio-grid-dev-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}
@media (max-width: 767px) {
    .htc-portfolio-grid-con,
    .htc-portfolio-grid-dev { grid-template-columns: 1fr; }
    .htc-architects-grid-item img { max-width: 110px; max-height: 70px; }
}

/* Fix: homepage hero banner was also a broken Elementor "image-carousel"
   (Swiper) — same as the other 3 already fixed. Two separate problems:
   1) without Swiper JS, only slide 1 of 3 ever showed (non-rotating —
      not obviously "broken" looking, but not actually a working slider);
   2) the prev/next arrow SVGs (.elementor-swiper-button svg) had ZERO
      size-constraining CSS anywhere in the whole export (confirmed —
      no matching rule in any stylesheet), so they rendered at raw
      unconstrained SVG size — the "size override" issue reported.
   Replaced with a small pure-CSS crossfade: no JS, no SVG, so neither
   problem can recur. Auto-cycles every 5s (matches the original
   autoplay_speed:5000 setting), infinite loop, no manual arrows —
   simplest thing that can't break. */
.htc-hero-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6.2;
    max-height: 460px;
    overflow: hidden;
    background: #1c2b1a;
}
@media (max-width: 767px) {
    .htc-hero-slider { aspect-ratio: 4 / 3; max-height: 340px; }
}
.htc-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.htc-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.htc-hero-slider-3 .htc-hero-slide-1 { animation: htc-hero-fade-3 15s infinite; }
.htc-hero-slider-3 .htc-hero-slide-2 { animation: htc-hero-fade-3 15s infinite; animation-delay: 5s; }
.htc-hero-slider-3 .htc-hero-slide-3 { animation: htc-hero-fade-3 15s infinite; animation-delay: 10s; }
@keyframes htc-hero-fade-3 {
    0%    { opacity: 0; }
    3.5%  { opacity: 1; }
    30%   { opacity: 1; }
    36.5% { opacity: 0; }
    100%  { opacity: 0; }
}