/*
Theme Name: NEW DEW HAIR THEMES
Theme URI: https://newdewhairthemes.com
Author: New Dew Hair
Author URI: https://newdewhairthemes.com
Description: Production-ready luxury WordPress theme engineered specifically for New Dew Hair hair styling, wig customization, hair extensions, knotless braids, and scalp care services. Fully compatible with Elementor, One Click Demo Import, TGMPA plugin activation, and custom AJAX booking.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: new-dew-hair-themes
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-colors, custom-logo, custom-menu, featured-images, elementor-header-footer, translation-ready, responsive-layout, block-patterns, services

New Dew Hair Themes WordPress Theme, Copyright 2026 New Dew Hair Themes.
Distributed under the terms of the GNU GPL.
*/

:root {
  --ndht-soft-lilac: #E6E1F5;
  --ndht-lavender: #D8CEF6;
  --ndht-royal-purple: #4A154B;
  --ndht-dark-charcoal: #1F1A24;
  --ndht-muted-grey: #756E80;
  --ndht-bg-light: #FAF8FC;
  --ndht-font-heading: 'Playfair Display', Georgia, serif;
  --ndht-font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--ndht-font-body);
  background-color: var(--ndht-bg-light);
  color: var(--ndht-dark-charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* Unscoped Elementor Container & Canvas Overrides - Prevents theme wrappers from interfering with Elementor full-width layouts */
.elementor-page .entry-content,
.elementor-editor-active .entry-content,
.page-template-template-full-width .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.elementor-section-wrap,
.elementor-container {
  box-sizing: border-box;
}

/* ==========================================================================
   Continuous Moving / Scrolling Marquee Ticker Styles
   ========================================================================== */
@keyframes ndht-marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.ndht-marquee-wrapper {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.ndht-marquee-track,
.animate-marquee {
  display: flex !important;
  flex-direction: row !important;
  width: max-content !important;
  min-width: 200% !important;
  will-change: transform !important;
  animation: ndht-marquee-scroll 25s linear infinite !important;
}

.ndht-marquee-item {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.ndht-marquee-wrapper:hover .ndht-marquee-track,
.ndht-marquee-wrapper:hover .animate-marquee {
  animation-play-state: paused;
}

/* ==========================================================================
   Signature Hair Services 3x3 CSS Grid & Small Image Box Presentation
   ========================================================================== */
.signature-services-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  align-items: stretch;
}

@media (min-width: 768px) {
  .signature-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .signature-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
  }
}

/* Reusable class for consistent, compact service card media presentation */
.service-card-media-wrapper {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  height: 130px !important;
  max-height: 130px !important;
  min-height: 130px !important;
  overflow: hidden !important;
  background-color: rgba(230, 225, 245, 0.4);
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Allow Elementor inline styles and custom widgets to override defaults when explicitly set */
.elementor-widget .service-card-media-wrapper[style*="height"] {
  height: var(--elementor-image-height, 130px) !important;
  max-height: none;
}

.elementor-widget .service-card-media-wrapper[style*="aspect-ratio"] {
  aspect-ratio: var(--elementor-aspect-ratio, 3 / 2) !important;
}

@media (max-width: 768px) {
  .service-card-media-wrapper {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
    height: 130px !important;
    max-height: 130px !important;
    min-height: 130px !important;
  }
}

@media (max-width: 640px) {
  .service-card-media-wrapper {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
    height: 130px !important;
    max-height: 130px !important;
    min-height: 130px !important;
  }
}

.service-card-media-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-media-wrapper:hover .service-card-media-img,
.group:hover .service-card-media-img {
  transform: scale(1.05);
}