/**
 * Creative Maker Lab - Site Custom Styles
 * 
 * This file contains non-color-specific customizations for the site.
 * For color customizations, see custom-colors.css
 * 
 * Includes: Layout, positioning, spacing, transitions, and structural CSS
 */

/* ===================================
   HEADER & NAVIGATION - LAYOUT
   =================================== */

/* Header tagline - smaller text */
.same-language-currency p {
  font-size: 14px !important;
}

/* Logo centering */
.logo-hm9 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Slider-banner area spacing to account for transparent header */
.slider-banner-area {
  margin-top: 255px;
  padding-bottom: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-banner-area {
    margin-top: 162px;
  }
}

@media only screen and (max-width: 767px) {
  .slider-banner-area {
    margin-top: 186px;
  }
}

/* Disable slider heading entrance animations (keep buttons animated) */
.owl-item.active .slider-animated-1 h3,
.owl-item.active .slider-animated-1 h1 {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Icon transitions */
.header-action a i,
.header-action-2 a i,
.search-active i,
.account-satting-active i,
.icon-cart i {
  transition: color 0.3s ease;
}

/* Submenu positioning - closer to icons */
.search-content {
  top: calc(100% - 3px) !important;
}

.account-dropdown {
  top: calc(100% - 3px) !important;
}

.shopping-cart-content {
  top: calc(100% - 3px) !important;
}


/* ===================================
   FOOTER - LAYOUT
   =================================== */

/* Newsletter subscribe button styling */
.subscribe-form .button,
.footer-widget .subscribe-style .subscribe-form form .clear input {
  border-bottom: none !important;
  padding: 3px !important;
}

.subscribe-form .button:hover,
.footer-widget .subscribe-style .subscribe-form form .clear input:hover {
  border-bottom: none !important;
}


/* ===================================
   PRODUCT CARDS - LAYOUT
   =================================== */

/* Product card hover effects */
.product-wrap-2 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-wrap-2:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Product card titles (home grid) */
.product-area .product-wrap-2 .product-content-2 .title-price-wrap-2 h3 a {
  font-size: 19px !important;
  line-height: 1.15;
}

@media only screen and (max-width: 767px) {
  .product-area .product-wrap-2 .product-content-2 .title-price-wrap-2 h3 a {
    font-size: 17px !important;
  }
}

/* Save-money CTA: push button to the right (desktop) */
.save-money-content .save-money-btn {
  margin-left: auto;
  margin-right: 50px;
  position: relative;
  top: 20px;
}

.save-money-content .text-standout-p-dark {
  flex: 1 1 auto;
  text-align: center;
  margin: 0 20px;
}

@media only screen and (max-width: 767px) {
  .save-money-content .save-money-btn {
    margin: 20px auto 0;
  }
  .save-money-content .text-standout-p-dark {
    margin: 12px 0 0;
  }
}


/* ===================================
   UTILITY CLASSES
   =================================== */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Text utilities */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* ===================================
   LINK HOVER UNDERLINES
   =================================== */

/* Underline on hover with matching color */
a:hover,
a:focus {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Active nav item: keep underline matching text color */
.main-menu nav ul li.active > a,
#mobile-menu-active ul li.active > a {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Don't underline button-like/icon-only links */
.btn:hover,
.btn:focus,
.button:hover,
.button:focus,
.default-btn:hover,
.default-btn:focus,
.btn-hover a:hover,
.btn-hover a:focus,
.product-action-2 a:hover,
.product-action-2 a:focus,
.product-tab-list a:hover,
.product-tab-list a:focus,
.search-active:hover,
.search-active:focus,
.account-satting-active:hover,
.account-satting-active:focus,
.icon-cart:hover,
.icon-cart:focus {
  text-decoration: none !important;
}


/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
  /* Adjust submenu positioning on mobile */
  .search-content,
  .account-dropdown,
  .shopping-cart-content {
    top: calc(100% + 5px) !important;
  }
  
  /* Stack product cards on mobile */
  .product-wrap-2 {
    margin-bottom: 30px;
  }
}

@media (max-width: 576px) {
  /* Further mobile adjustments */
  .product-wrap-2:hover {
    transform: none;
  }
}


/* ===================================
   ACCESSIBILITY
   =================================== */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100;
  padding: 10px 20px;
  transition: top 0.3s ease;
}

.skip-to-main:focus {
  top: 0;
}


/* ===================================
   CUSTOM ANIMATIONS
   =================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

.slide-in-up {
  animation: slideInUp 0.5s ease-out;
}

/* ===================================
   SECTION SPACING OVERRIDES
   =================================== */

/* Tighten spacing between support-area and product-area on home */
.support-area.pb-70 {
  padding-bottom: 35px !important;
}

@media only screen and (max-width: 767px) {
  .support-area.pb-70 {
    padding-bottom: 15px !important;
  }
}

/* Product section title: add breathing room above tagline */
.product-area .section-title-5 p {
  margin-top: 18px !important;
  font-size: 18px !important;
  line-height: 1.45;
}

@media only screen and (max-width: 767px) {
  .product-area .section-title-5 p {
    margin-top: 12px !important;
    font-size: 16px !important;
  }
}

/* "What You'll Make" section: tighten spacing by ~5px */
.product-area.pt-100.pb-95 .section-title-5.mb-60 {
  margin-bottom: 55px !important; /* was 60px via mb-60 */
}

/* Reduce gap between this product-area and newsletter */
.product-area.pt-100.pb-95 {
  padding-bottom: 90px !important; /* was 95px via pb-95 */
}

/* Reduce gap between tabs and products grid */
.product-area .product-tab-list.pb-60 {
  padding-bottom: 25px !important;
}

@media only screen and (max-width: 767px) {
  .product-area .product-tab-list.pb-60 {
    padding-bottom: 12px !important;
  }
}

/* ===================================
   NEWSLETTER BANNER
   =================================== */

.newsletter-banner-area {
  padding: 0 0 70px;
}

.newsletter-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 0;
  padding: 34px 34px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.newsletter-banner-title {
  color: var(--color-white);
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.newsletter-banner-subtitle {
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.newsletter-banner-form {
  margin: 0;
}

.newsletter-banner-form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.newsletter-banner-form input[type="email"] {
  flex: 1 1 auto;
  height: 52px;
  border-radius: 0;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  padding: 0 16px;
  outline: none;
}

.newsletter-banner-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.newsletter-banner-form input[type="email"]:focus {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.16);
}

.newsletter-banner-form button {
  height: 52px;
  padding: 0 18px;
  border-radius: 0;
  border: 2px solid var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.newsletter-banner-form button:hover {
  background: transparent;
  color: var(--color-white);
  transform: translateY(-1px);
}

.newsletter-banner-fineprint {
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

@media only screen and (max-width: 991px) {
  .newsletter-banner {
    padding: 26px 18px;
  }
  .newsletter-banner-title {
    font-size: 28px;
  }
  .newsletter-banner-form-row {
    margin-top: 16px;
  }
}

@media only screen and (max-width: 575px) {
  .newsletter-banner-form-row {
    flex-direction: column;
    align-items: stretch;
  }
  .newsletter-banner-form button {
    width: 100%;
  }
}

/* ===================================
   FOOTER
   =================================== */

.footer-bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.footer-bottom p {
  margin: 0;
  font-size: 14px;
  color: var(--color-gray);
}

/* ===================================
   SUPPORT CARDS - DECORATIVE ICON LAYOUT
   =================================== */

/* Support cards: subtle, positioned background icons */
.support-wrap-3 {
  /* Create a predictable stacking context so decorative icons can't float above text */
  isolation: isolate;
}

.support-wrap-3 .support-content-3 {
  position: relative;
  z-index: 1;
}

.support-wrap-3 .support-icon-2a,
.support-wrap-3 .support-icon-2b,
.support-wrap-3 .support-icon-2c {
  position: absolute !important;
  pointer-events: none;

  z-index: -1;
}

/* 1) lower in the card, rotated 15° right */
.support-wrap-3 .support-icon-2a {
  left: 15px;
  top: 5px;
  opacity: 0.25;
  transform: rotate(-15deg);
}

/* 2) higher in the card, rotated 15° left */
.support-wrap-3 .support-icon-2b {
  left: 45px;
  top: 5px;
  opacity: 0.17;
  transform: rotate(-15deg);
}

/* 3) upper-left corner, rotated 45° right */
.support-wrap-3 .support-icon-2c {
  right: 5px;
  top: 10px;
  opacity: 0.15;
  transform: rotate(15deg);
}

.support-wrap-3 .support-icon-2a img,
.support-wrap-3 .support-icon-2b img,
.support-wrap-3 .support-icon-2c img {
  width: auto;
  max-width: 120px;
  height: auto;
  display: block;
}

@media only screen and (max-width: 767px) {
  .support-wrap-3 .support-icon-2a img,
  .support-wrap-3 .support-icon-2b img,
  .support-wrap-3 .support-icon-2c img {
    max-width: 90px;
  }
}


/* ===================================
   PRINT STYLES
   =================================== */

@media print {
  /* Hide navigation and interactive elements */
  .header-area,
  .footer-area,
  .shopping-cart-content,
  .search-content,
  .account-dropdown {
    display: none !important;
  }
  
  /* Ensure readable text sizes */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  /* Prevent page breaks inside elements */
  .product-wrap-2,
  .blog-wrap {
    page-break-inside: avoid;
  }
}


/* ===================================
   END OF SITE CUSTOM STYLES
   =================================== */