/*
Theme Name: JA Jackson Ltd
Theme URI: https://jajacksons.co.uk
Author: ElevateOM
Author URI: https://elevateom.com
Description: Custom WordPress theme for J A Jackson Ltd — property and business services across Carnforth, Lancaster, Morecambe & South Lakes. Built from approved design markup with ACF integration and a custom Testimonials post type.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ja-jackson
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =====================================================================
   The following rules are carried over verbatim from the approved
   design markup's inline <style> blocks (hero responsive sizing,
   "Why Choose Us" card hover/float animation, and FAQ accordion open
   state). No new styling has been authored — these are the same rules
   present in the supplied HTML.
   ===================================================================== */

/* Desktop - Hero */
.hero-section {
  min-height: 70vh;
}

.hero-content {
  padding-top: 12rem;
  padding-bottom: 5rem;
}

.hero-heading {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.hero-subtitle {
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
}

.hero-buttons {
  gap: 1rem;
}

.hero-cta {
  font-size: 1.125rem;
  padding: 1.25rem 2.5rem;
}

.hero-quote-text {
  font-size: 0.9375rem;
  margin-top: 1.5rem;
}

/* Tablet (iPad) - Slightly reduce height and tighten spacing */
@media (max-width: 1024px) {
  .hero-section {
    min-height: 65vh;
  }

  .hero-content {
    padding-top: 10rem;
    padding-bottom: 4rem;
  }

  .hero-heading {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .hero-cta {
    font-size: 1rem;
    padding: 1rem 2rem;
  }

  .hero-quote-text {
    font-size: 0.875rem;
    margin-top: 1.25rem;
  }
}

/* Mobile - Significantly reduce height and scale down all elements */
@media (max-width: 768px) {
  .hero-section {
    min-height: 55vh;
  }

  .hero-content {
    padding-top: 8rem;
    padding-bottom: 3rem;
  }

  .hero-heading {
    font-size: 1.625rem;
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
  }

  .hero-buttons {
    gap: 0.75rem;
  }

  .hero-cta {
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
  }

  .hero-quote-text {
    font-size: 0.8125rem;
    margin-top: 1rem;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .hero-section {
    min-height: 50vh;
  }

  .hero-content {
    padding-top: 7rem;
  }

  .hero-heading {
    font-size: 1.5rem;
  }

  .hero-subtitle {
    font-size: 0.8125rem;
  }

  .hero-cta {
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
  }
}

@keyframes slideBackgroundSlow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Card hover effects */
.why-card:hover > div {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 16px 50px rgba(212, 175, 55, 0.25), 0 0 60px rgba(212, 175, 55, 0.15);
}

.why-card:hover .glow-effect {
  opacity: 1;
}

.why-card:hover .icon-container {
  transform: scale(1.15) rotate(5deg);
  background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.5), 0 0 50px rgba(212, 175, 55, 0.3);
}

.why-card:hover .icon-svg {
  transform: scale(1.1) rotate(-5deg);
  color: #0A0A0A !important;
}

.why-card:hover .card-title {
  color: #D4AF37 !important;
  transform: scale(1.05);
}

.why-card:hover .card-description {
  color: #FFFFFF !important;
}

.why-card:hover .corner-accent {
  opacity: 1;
}

/* Floating animation */
.why-card {
  animation: floatSlow 5s ease-in-out infinite;
}

.why-card:nth-child(1) { animation-delay: 0s; }
.why-card:nth-child(2) { animation-delay: 0.4s; }
.why-card:nth-child(3) { animation-delay: 0.8s; }
.why-card:nth-child(4) { animation-delay: 1.2s; }
.why-card:nth-child(5) { animation-delay: 1.6s; }

/* Icon pulse on hover */
.why-card:hover .icon-container {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Active state */
.why-card:active > div {
  transform: translateY(-6px) scale(1);
}

/* =====================================================================
   Fixed header support.
   The header is position:fixed (see header.php) so it stays pinned on
   scroll across the whole site. The homepage doesn't need extra
   clearance because hero.php already reserves space for the header via
   .hero-content's padding-top. Every other template gets a matching
   top-padding spacer here so page content isn't hidden underneath the
   fixed header on load.
   ===================================================================== */
.jaj-has-fixed-header-spacing main {
  padding-top: 96px;
}

@media (max-width: 1024px) {
  .jaj-has-fixed-header-spacing main {
    padding-top: 86px;
  }
}

@media (max-width: 480px) {
  .jaj-has-fixed-header-spacing main {
    padding-top: 76px;
  }
}