/*
Theme Name: DesignInferno
Theme URI: https://pmgs.com.au
Author: PMGS Digital
Author URI: https://pmgs.com.au
Version: 1.0.0
Tested up to: 6.4
Requires PHP: 7.4
Description: A modern, clean, minimal, blog, portfolio, business, corporate, agency, one page, landing page, responsive, customizable, tailwind css, html5, css3, javascript, jquery, php, wordpress theme. Design Inferno Business Theme.
Text Domain: designinferno
Tags: Modern, Clean, Minimal, Blog, Portfolio, Business, Corporate, Agency, One Page, Landing Page, Responsive, Customizable, Tailwind CSS, HTML5, CSS3, JavaScript, PHP, WordPress, Design Inferno, Business, Theme
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Copyright: (C) 2026 Design Inferno. This theme is licensed under the GPL v2 or later.
*/
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: clip; /* clip preserves position: sticky; hidden breaks it */
}
body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* Inner hero - ensure title/description clear the sticky nav */
.inner-hero-content {
  padding-top: 7rem; /* 112px - clears h-20 header */
}
@media (min-width: 640px) {
  .inner-hero-content {
    padding-top: 8rem; /* 128px - clears h-24 header */
  }
}
@media (min-width: 768px) {
  .inner-hero-content {
    padding-top: 9rem; /* 144px - extra space below nav */
  }
}

/* Ensure header is transparent at top - loads last to override (exclude pool-fence) */
#site-header:not(.header-primary-bg):not(.header-scrolled) {
  background-color: transparent !important;
}

/* Product pages - same as sticky header: light background rgb(232, 236, 247), primary nav/CTA */
#site-header.header-primary-bg {
  background-color: rgb(232, 236, 247) !important;
}

#site-header.header-primary-bg .nav-link,
#site-header.header-primary-bg .dropdown-arrow,
#site-header.header-primary-bg .nav-sub-arrow {
  color: #23428e !important;
}

#site-header.header-primary-bg .dropdown-arrow {
  border-top-color: #23428e !important;
}

#site-header.header-primary-bg .header-cta-btn {
  background-color: #23428e !important;
  color: #fff !important;
}

#site-header.header-primary-bg .header-cta-btn:hover {
  background-color: #04267d !important;
  color: #fff !important;
}

#site-header.header-primary-bg .header-phone,
#site-header.header-primary-bg .mobile-menu-toggle {
  color: #04267d !important;
}

/* Header at top - white nav elements (exclude product pages which use header-primary-bg) */
#site-header:not(.header-scrolled):not(.header-primary-bg) .dropdown-arrow {
  color: #fff !important;
  border-top-color: #fff !important;
}

#site-header:not(.header-scrolled):not(.header-primary-bg) .nav-sub-arrow {
  color: #fff !important;
}

/* Sticky header - primary colors for nav and button */
#site-header.header-scrolled .nav-link,
#site-header.header-scrolled .dropdown-arrow {
  color: #23428e !important;
}

#site-header.header-scrolled .dropdown-arrow {
  border-top-color: #23428e !important;
}

#site-header.header-scrolled .nav-sub-arrow {
  color: #23428e !important;
}

#site-header.header-scrolled .header-cta-btn {
  background-color: #23428e !important;
  color: #fff !important;
}

#site-header.header-scrolled .header-cta-btn:hover {
  background-color: #04267d !important;
  color: #fff !important;
}

#site-header.header-scrolled .mobile-menu-toggle {
  color: #04267d !important;
}

#site-header.header-scrolled .header-phone {
  color: #04267d !important;
}

/* Why Choose Grid - button hover */
.why-choose-grid-btn:hover {
  background-color: #1e3a8a !important;
  color: #fff !important;
}

/* Recent Projects - button hover */
.recent-projects-btn:hover {
  background-color: #1e3a8a !important;
  color: #fff !important;
}

/* Product Gallery Lightbox */
.product-gallery-lightbox {
  display: none;
}
.product-gallery-lightbox.flex {
  display: flex !important;
}
.product-gallery-lightbox-prev,
.product-gallery-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.product-gallery-lightbox-prev {
  left: 1rem;
}
.product-gallery-lightbox-next {
  right: 1rem;
}

/* Product Gallery - loading spinner */
.product-gallery-spinner .animate-spin {
  animation: product-gallery-spin 1s linear infinite;
}
@keyframes product-gallery-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Why Choose Us - button hover */
.why-choose-us-btn:hover {
  background-color: #1e3a8a !important;
  color: #fff !important;
}

/* Our Process - auto-fit grid for even spread (4 or 5 items) */
@media (min-width: 640px) {
  .our-process-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Products page grid - hover overlay with title and diagonal lines */
.product-grid-overlay {
  transition: opacity 0.35s ease;
}

.product-grid-title {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease 0.1s,
    transform 0.35s ease 0.1s;
}

.product-grid-item:hover .product-grid-title {
  opacity: 1;
  transform: translateY(0);
}

.product-grid-lines {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.product-grid-item:hover .product-grid-lines {
  opacity: 1;
}

.product-grid-line {
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
  transition: stroke-dashoffset 0.4s ease 0.15s;
}

.product-grid-item:hover .product-grid-line {
  stroke-dashoffset: 0;
}

/* Process timeline - mobile: stack cards below node */
@media (max-width: 640px) {
  .process-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .process-step-left,
  .process-step-right {
    width: 100%;
    max-width: 100%;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .process-step-left.process-step-left {
    order: 2;
  }
  .process-step-right.process-step-right {
    order: 2;
  }
  .process-step-center {
    order: 1;
  }
  .process-step-card {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .process-step-label:first-child {
    display: block;
    margin-bottom: 0.5rem;
  }
}

/* Splashback types - flip card on hover */
.splashback-flip-card {
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.splashback-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.splashback-flip-card:hover .splashback-flip-inner {
  transform: rotateY(180deg);
}

.splashback-flip-front,
.splashback-flip-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.splashback-flip-front {
  transform: rotateY(0deg) translateZ(1px);
  -webkit-transform: rotateY(0deg) translateZ(1px);
}

.splashback-flip-back {
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
}

/* Mobile: show back content below image (no flip) */
@media (max-width: 640px) {
  .splashback-types-item {
    background: #fff;
    box-shadow:
      0 1px 3px 0 rgb(0 0 0 / 0.1),
      0 1px 2px -1px rgb(0 0 0 / 0.1);
    overflow: hidden;
  }
  .splashback-flip-card {
    height: auto;
    min-height: 280px;
  }
  .splashback-flip-inner {
    display: flex;
    flex-direction: column;
    transform: none !important;
  }
  .splashback-flip-front {
    position: relative;
    flex-shrink: 0;
    height: 180px;
  }
  .splashback-flip-back {
    position: relative;
    transform: none;
    flex: 1;
  }
  .splashback-flip-back > div {
    box-shadow: none;
  }
}

/* Gravity Form modal - loads in style.css so it applies (not purged by Tailwind) */
.gf-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
  pointer-events: none;
}

.gf-modal.gf-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gf-modal[hidden] {
  display: none !important;
}

.gf-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.gf-modal__content {
  position: relative;
  background: #fff;
  border-radius: 0;
  max-width: 42rem;
  width: 100%;
  max-height: 95vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.gf-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.gf-modal__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: #232323;
}

.gf-modal__close {
  flex-shrink: 0;
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #232323;
  transition: opacity 0.2s;
}

.gf-modal__close:hover {
  opacity: 0.7;
}

.gf-modal__close-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.gf-modal__body .gform_wrapper input[type="text"],
.gf-modal__body .gform_wrapper input[type="email"],
.gf-modal__body .gform_wrapper input[type="tel"],
.gf-modal__body .gform_wrapper input[type="number"],
.gf-modal__body .gform_wrapper select,
.gf-modal__body .gform_wrapper textarea {
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  width: 100%;
}

.gf-modal__body .gform_wrapper .gform_footer input[type="submit"] {
  background-color: #04267d;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.5rem;
  width: 100%;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.gf-modal__body .gform_wrapper .gform_footer input[type="submit"]:hover {
  background-color: #23428e;
}

.gf-modal-trigger {
  cursor: pointer;
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  background-color: #04267d;
  color: #fff;
  transition: background-color 0.2s;
}

.gf-modal-trigger:hover {
  background-color: #23428e;
}

/* Product Hero thumbnails - Swiper with prev/next (pool-fence, glass-floors, glass-wardrobe-doors) */
.product-hero-thumbs-wrapper .product-hero-thumb.border-secondary {
  border-color: var(--color-secondary, #04267d) !important;
}
.product-hero-thumbs-swiper .swiper-slide {
  width: 64px;
  flex-shrink: 0;
}

/* Pool Fence - E-commerce style product page */
.pool-fence-question-btn {
  border-radius: 60px !important;
}

/* Pool fence question modal - HTML answer content */
.pool-fence-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.pool-fence-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.pool-fence-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Wall Mirrors - question modal HTML answer (same as pool-fence) */
.wall-mirrors-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.wall-mirrors-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.wall-mirrors-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Slumped Glass - question modal HTML answer */
.slumped-glass-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.slumped-glass-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.slumped-glass-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Glass Signage - question modal HTML answer */
.glass-signage-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.glass-signage-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.glass-signage-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Glass Balustrades - question modal HTML answer */
.glass-balustrades-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.glass-balustrades-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.glass-balustrades-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Glass Doors - question modal HTML answer */
.glass-doors-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.glass-doors-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.glass-doors-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Glass Splashbacks - question modal HTML answer */
.glass-splashbacks-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.glass-splashbacks-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.glass-splashbacks-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Frameless Shower Screens - question modal HTML answer */
.frameless-shower-screens-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.frameless-shower-screens-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.frameless-shower-screens-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Fixed Panel Shower Screens - question modal HTML answer */
.fixed-panel-shower-screens-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.fixed-panel-shower-screens-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.fixed-panel-shower-screens-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Semi Framed Shower Screen - question modal HTML answer */
.semi-framed-shower-screen-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.semi-framed-shower-screen-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.semi-framed-shower-screen-modal-answer .flex + .flex {
  margin-top: 1rem;
}

/* Semi Frameless Shower Screens - question modal HTML answer */
.semi-frameless-shower-screens-modal-answer h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.semi-frameless-shower-screens-modal-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.semi-frameless-shower-screens-modal-answer .flex + .flex {
  margin-top: 1rem;
}