/*
Theme Name: VistaCraft
Theme URI:
Author: Maniruzzaman Akash
Author URI:
Description: Interactive 3D Window Configurator & E-Commerce Theme built on WordPress + WooCommerce. Customers can customize window products in real-time 3D (color, material, size), browse the catalog, and request quotes.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vistacraft
Tags: e-commerce, woocommerce, full-site-editing, block-themes, custom-colors
*/

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

*
  CSS
  Reset
  ----------------------------------------------------------------------------
  */
  *,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  overflow-x: hidden;
}

html {
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

b,
strong {
  font-weight: var(--wp--custom--font-weight--semi-bold);
}

ol,
ul {
  padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
  padding-inline-start: var(--wp--preset--spacing--medium);
}

div[class*="wp-block-"] figcaption {
  color: var(--wp--preset--color--secondary);
  font-size: var(--wp--preset--font-size--x-small);
  margin-bottom: 0;
  margin-top: 20px;
  text-align: center;
}

img,
figure {
  max-width: 100%;
  height: auto;
}

/* Standardize form styling
--------------------------------------------- */

input,
button,
textarea,
select {
  font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
  -webkit-appearance: none;
  appearance: none;
}

.sc-check-input,
.sc-check-input[type="checkbox"],
.sc-check-input[type="radio"] {
  flex: 0 0 1em;
}

/* input:not([type="submit"]), */
select,
textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
  color: var(--wp--preset--color--gray);
  border-radius: 5px;
  border: solid 1px var(--wp--preset--color--light-gray);
  padding: 0.75em 1em;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
}

input:focus-visible,
textarea:focus-visible {
  outline-color: var(--wp--preset--color--primary);
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
  width: auto;
}

/* Remove top spacing between header and main content */
:where(.wp-site-blocks) > * + * {
  margin-block-start: 0;
}

label {
  width: 100%;
  display: block;
}

::placeholder {
  color: var(--wp--preset--color--secondary);
  font-size: var(--wp--preset--font-size--small);
  opacity: 0.75;
}

/* Global animated underline for all links
--------------------------------------------- */
a:where(
    :not(.wp-element-button):not(.wp-block-button__link):not(
        [class*="fs-product-card__image"]
      ):not([class*="fs-product-card__action"]):not(.fs-category-card):not(
        [class*="tile"]
      ):not([class*="logo"])
  ) {
  position: relative;
  text-decoration: none !important;
}

a:where(
    :not(.wp-element-button):not(.wp-block-button__link):not(
        [class*="fs-product-card__image"]
      ):not([class*="fs-product-card__action"]):not(.fs-category-card):not(
        [class*="tile"]
      ):not([class*="logo"])
  )::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

a:where(
    :not(.wp-element-button):not(.wp-block-button__link):not(
        [class*="fs-product-card__image"]
      ):not([class*="fs-product-card__action"]):not(.fs-category-card):not(
        [class*="tile"]
      ):not([class*="logo"])
  ):hover::after {
  width: 100%;
}
.wp-block-navigation .wp-block-navigation-item {
  margin-left: 20px;
}

/* Active navigation link — highlight current page */
.wp-block-navigation-item.current-menu-item
  > .wp-block-navigation-item__content,
.wp-block-navigation-item.current_page_item
  > .wp-block-navigation-item__content {
  font-weight: 700;
}

.wp-block-navigation-item.current-menu-item
  > .wp-block-navigation-item__content::after,
.wp-block-navigation-item.current_page_item
  > .wp-block-navigation-item__content::after {
  width: 100%;
}

/*
 * Sticky header — applied site-wide to the header template part.
 * To disable: set --vistacraft-header-position to "relative" in
 * theme.json > styles > css or via Additional CSS in the Customizer.
 */
:root {
  --vistacraft-header-position: sticky;
}

.wp-site-blocks > .wp-block-template-part:first-child {
  position: var(--vistacraft-header-position);
  top: 0;
  z-index: 9999;
  background: var(--wp--preset--color--primary-white, #fff);
}

.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
    top: 0;
  }
}

/* ═══════════════════════════════════════════════
   Chaises-inspired animations
   ═══════════════════════════════════════════════ */

/* 1. Fade-up on scroll
--------------------------------------------- */
.vc-animate {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.vc-animate--visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Text reveal — "Lights & shapes"
--------------------------------------------- */
.vc-text-reveal .vc-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.vc-text-reveal--visible .vc-char {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Marquee / ticker
--------------------------------------------- */
.vc-marquee {
  overflow: hidden !important;
  position: relative;
}

.vc-marquee__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: vc-marquee 25s linear infinite;
  will-change: transform;
}

.vc-marquee__text {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  padding: 0 0.5em;
}

.vc-marquee__separator {
  flex-shrink: 0;
  padding: 0 0.5em;
  opacity: 0.4;
}

@keyframes vc-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.vc-marquee:hover .vc-marquee__track {
  animation-play-state: paused;
}

/* Mobile navigation overlay alignment fix
--------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item {
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
  font-size: var(--wp--preset--font-size--medium, 1.125rem);
}

/* 4. Header scroll behavior
--------------------------------------------- */
.wp-site-blocks > .wp-block-template-part:first-child {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
}

.vc-header--scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.vc-header--hidden {
  transform: translateY(-100%);
}

/* 5. Card hover lift
--------------------------------------------- */
.vc-hover-lift {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

.vc-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* 6. Product image hover zoom
--------------------------------------------- */
.fs-product-card__image img,
.fs-category-card img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-product-card:hover .fs-product-card__image img,
.fs-category-card:hover img {
  transform: scale(1.05);
}

/* 7. Parallax cover images
--------------------------------------------- */
.wp-block-cover {
  overflow: hidden;
}

.wp-block-cover__image-background {
  transition: transform 0.1s linear;
}

/* 8. Stats counter subtle pulse on appear
--------------------------------------------- */
.fs-stats-counter .fs-stats-counter__number {
  transition: transform 0.4s ease;
}

/* ═══════════════════════════════════════════════
   Mobile-first optimizations
   ═══════════════════════════════════════════════ */

/* --- Mobile-first: all optimizations in one media query --- */
@media screen and (max-width: 781px) {
  /* Global lateral padding for all site content on mobile */
  .wp-site-blocks {
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: hidden;
  }

  /* Full-width blocks break out of the padding */
  .wp-site-blocks .alignfull {
    margin-left: -16px;
    margin-right: -16px;
    max-width: none;
    width: auto;
  }

  /* But re-add inner padding so content doesn't touch edges */
  .wp-site-blocks .alignfull > .wp-block-group,
  .wp-site-blocks .alignfull > .fs-container,
  .wp-site-blocks .fs-product-grid,
  .wp-site-blocks .fs-product-carousel,
  .wp-site-blocks .fs-testimonials,
  .wp-site-blocks .fs-service-features,
  .wp-site-blocks .fs-stats-counter,
  .wp-site-blocks .fs-newsletter-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hide wishlist button on mobile */
  .wp-block-flavor-starter-wishlist-menu-button {
    display: none !important;
  }

  /* Header: tighter padding */
  .wp-site-blocks > header {
    padding-left: 0;
    padding-right: 0;
  }

  header .alignwide {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Mobile navigation overlay: bigger text, less spacing */
  .wp-block-navigation__responsive-container.is-menu-open {
    padding: 1.5rem;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding-top: 1rem;
    gap: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item__content {
    padding: 0.5rem 0;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    font-weight: 600;
  }

  /* Contact info at bottom of mobile nav */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content::after {
    content: "Spokane Valley, WA  \A info@vistacraft.com  \A (509) 555-0100";
    display: block;
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--gray, #4b5563);
    line-height: 1.8;
    white-space: pre-line;
    border-top: 1px solid var(--wp--preset--color--light-gray, #cddfe0);
    padding-top: 1.5rem;
  }

  /* Reduce oversized vertical padding on mobile */
  .wp-block-group[style*="padding-top:100px"],
  .wp-block-group[style*="padding-top: 100px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Category showcase & quality materials: stack on mobile */
  .wp-block-columns {
    flex-direction: column !important;
  }

  .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }

  /* Large headings: scale down on mobile */
  .wp-block-heading[style*="font-size:52px"],
  .wp-block-heading[style*="font-size: 52px"] {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
  }

  /* 4-step process: 2 columns on mobile */
  .wp-block-group.is-layout-flex[style*="margin-top:var(--wp--preset--spacing--50)"]
    > .wp-block-group {
    flex: 0 0 calc(50% - var(--wp--preset--spacing--60, 30px) / 2);
  }

  /* Product page: breathing room */
  .wp-block-surecart-product-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Respect reduced motion
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vc-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .vc-text-reveal .vc-char {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .vc-marquee__track {
    animation: none;
  }
  .vc-hover-lift:hover {
    transform: none;
  }
  .fs-product-card:hover .fs-product-card__image img,
  .fs-category-card:hover img {
    transform: none;
  }
}