/*
Theme Name: Surety Roofing
Theme URI: https://mydevelopmentlink.com/primecraftroofing/
Author: Inceptial
Description: Custom WordPress theme for Surety Roofing Northern California.
Version: 1.0.0
*/

/* Design 3 Stylesheet — Nordic Forest & Solar Amber Theme */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Epilogue:wght@500;600;700;800;900&display=swap');

:root {
  --d3-forest: #0D2F27;
  --d3-forest-dark: #071E19;
  --d3-forest-light: #E6F4F1;
  --d3-emerald: #059669;
  --d3-emerald-light: #D1FAE5;
  --d3-amber: #D97706;
  --d3-amber-light: #FEF3C7;
  --d3-slate: #374151;
  --d3-muted: #6B7280;
  --d3-border: #E5E7EB;
  --d3-bg-soft: #F9FAFB;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--d3-slate);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Epilogue', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.03em;
}

/* Floating Glass Pill Navbar */
.floating-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: 0 10px 30px -10px rgba(13, 47, 39, 0.08);
}

/* Subtle Nordic Pattern Grid */
.nordic-grid-bg {
  background-image: radial-gradient(rgba(13, 47, 39, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Squircle & Pill Cards */
.squircle-card {
  border-radius: 1.5rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.squircle-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 35px -10px rgba(13, 47, 39, 0.1);
}

/* Service Image Lift & Hover Depth Animation */
.service-media-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
  cursor: pointer;
}

.service-media-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 40px -12px rgba(13, 47, 39, 0.22), 0 10px 18px -6px rgba(13, 47, 39, 0.1);
}

.service-media-card img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* FAQ Accordion Transitions */
.faq-content {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #F3F4F6;
}
::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #059669;
}