/* Developer template supplemental styles */

/* Base look-and-feel (Elegant Minimalist) */
html, body {
  background-color: #F7F7F7; /* bg-light */
  color: #2C3E50; /* text-dark */
  font-family: 'Inter', sans-serif; /* Clean Sans */
  scroll-behavior: smooth;
  padding-bottom: 2rem; /* space for fixed mobile footer */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Section spacing utility */
.section-padding { padding-top: 5rem; padding-bottom: 5rem; }

/* Elegant shadow for cards */
.elegant-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); }

/* Accent divider utility */
.accent-divider { border-bottom: 2px solid #16A085; }

/* Dropdown menu stacking */
.dropdown-menu { z-index: 100; }

/* Mobile fixed footer tweaks */
@supports (backdrop-filter: blur(6px)) {
  nav.fixed.bottom-0 { backdrop-filter: saturate(180%) blur(6px); }
}

/* Mobile Footer specific styling */
.mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem 0; flex: 1 1 0%; text-decoration: none; transition: color 0.2s; }
.mobile-nav-item:hover, .mobile-nav-item.active { color: #16A085; }

/* Styles for the Side Menu Animation */
#mobile-sidebar { transform: translateX(-100%); transition: transform 0.3s ease-out; position: fixed; top: 0; left: 0; height: 100%; width: 80%; max-width: 300px; z-index: 60; box-shadow: 4px 0 10px rgba(0,0,0,0.1); }
#mobile-sidebar.is-open { transform: translateX(0); }
#mobile-sidebar-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 59; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out, visibility 0.3s; }
#mobile-sidebar-backdrop.is-open { opacity: 1; visibility: visible; }

/* Caret rotation when open */
button#services-dropdown-desktop-button.open i[data-lucide="chevron-down"],
button#services-dropdown-mobile-button.open i[data-lucide="chevron-down"] { transform: rotate(180deg); }

/* ----------------------------- */
/* Template detail components    */
/* ----------------------------- */

/* Hero overlay refinemements */
.template-hero-title {
  text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Featured image overlay */
.template-hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.30) 100%),
              radial-gradient(60% 80% at 50% 30%, rgba(22,160,133,0.22) 0%, rgba(22,160,133,0.00) 70%);
}

/* Card styling for features/sections */
.template-card {
  border: 1px solid #E5E7EB; /* gray-200 */
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 10px 20px rgba(0,0,0,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.template-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.06); }

.template-card .template-card-icon {
  width: 32px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #16A085; background: rgba(22,160,133,0.10);
}

/* Numbered steps */
.template-step {
  border: 1px solid #E5E7EB; border-radius: 10px; background: #FFFFFF; padding: 14px;
}
.template-step .template-step-index {
  width: 24px; height: 24px; border-radius: 999px; display:flex; align-items:center; justify-content:center;
  color: #16A085; background: rgba(22,160,133,0.10); font-weight: 600; font-size: 13px;
}

/* CTAs */
.template-cta-primary {
  background: linear-gradient(90deg, #16A085, #18B394);
  color: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 600;
  box-shadow: 0 8px 20px rgba(22,160,133,0.25); transition: transform .18s ease, box-shadow .18s ease, opacity .18s;
}
.template-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(22,160,133,0.28); opacity: .95; }

.template-cta-secondary {
  border: 1px solid #D1D5DB; border-radius: 999px; padding: 10px 20px; font-weight: 600; color: #2C3E50; background: #fff;
}
.template-cta-secondary:hover { background: #F3F4F6; }

/* Dark card variant (for CTA and feature cards) */
.template-card-dark {
  background: #0F172A; /* slate-900 */
  border-color: #1F2937; /* slate-800 */
  color: #F3F4F6; /* light text */
}
.template-card-dark .template-card-icon {
  color: #16A085; background: rgba(22,160,133,0.18);
}
.template-card-dark .template-cta-secondary {
  border-color: #E5E7EB; color: #F9FAFB; background: transparent;
}
.template-card-dark .template-cta-secondary:hover { background: rgba(243,244,246,0.12); }

/* Sidebar items */
.template-sidebar-item { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.template-sidebar-item:hover h4 { color: #16A085; }
.template-sidebar-grid { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 10px; }
.template-sidebar-thumb-wrap { position: relative; width: 96px; height: 96px; overflow: hidden; border-radius: 8px; }
.template-sidebar-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-sidebar-thumb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.template-sidebar-title { font-weight: 600; color: #2C3E50; transition: color .15s ease; }
.template-sidebar-excerpt { color: rgba(44,62,80,0.75); margin-top: 4px; font-size: 12px; line-height: 1.35; }

/* Section headings */
.template-section-title { font-weight: 600; color: #2C3E50; letter-spacing: .2px; }