/* Custom styles - variables, keyframes, overrides */

/* Screen reader only - for accessibility/SEO */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.screen-reader-text:focus {
	clip: auto !important;
	height: auto;
	width: auto;
	display: block;
	padding: 1rem;
}

:root {
  --background: 0 0% 100%;
  --foreground: 233 82% 15%;
  --card: 0 0% 100%;
  --card-foreground: 233 82% 15%;
  --primary: 233 82% 15%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 233 82% 15%;
  --muted: 220 30% 96%;
  --muted-foreground: 220 10% 42%;
  --accent: 228 100% 53%;
  --accent-foreground: 0 0% 100%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 228 100% 53%;
  --radius: 0.5rem;
  --brand-pink: 337 90% 48%;
  --brand-blue: 228 100% 53%;
  --brand-cyan: 192 89% 51%;
  --brand-dark: 233 82% 15%;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--accordion-content-height); }
}
@keyframes accordion-up {
  from { height: var(--accordion-content-height); }
  to { height: 0; }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 4s ease-in-out infinite; }
.animate-slideDown { animation: slideDown 0.32s ease-out forwards; }
.animate-slideUp { animation: slideUp 0.28s ease-in forwards; }
.animate-fade-in { animation: fadeIn 0.2s ease-out forwards; }

.btn-sweep {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  transition: left 0.4s ease;
  z-index: -1;
}
.btn-sweep:hover::before { left: 0; }
.btn-sweep.bg-brand-pink:hover,
a.btn-sweep.bg-brand-pink:hover,
button.btn-sweep.bg-brand-pink:hover {
  background-color: rgba(7, 14, 70, 0.9) !important;
  color: white !important;
}

/* Accordion (cc- prefix for WordPress-safe namespacing) */
.cc-accordion-content {
  overflow: hidden;
  transition: height 0.2s ease-out;
}
.cc-accordion-content.cc-collapsed { height: 0; }
.cc-accordion-trigger svg { transition: transform 0.2s; }
.cc-accordion-trigger.cc-open svg { transform: rotate(180deg); }
.cc-accordion-trigger.cc-open { color: hsl(var(--brand-pink)); }
.cc-accordion-item.cc-open { border-color: hsl(var(--brand-blue) / 0.2); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.cc-accordion-item.cc-open .cc-accordion-trigger span:first-child { background: hsl(var(--brand-pink) / 0.1); color: hsl(var(--brand-pink)); }

/* Prose for blog content */
.prose-headings { font-weight: 800; letter-spacing: -0.02em; color: hsl(var(--brand-dark)); }
.prose h2 { margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; }
@media (min-width: 640px) { .prose h2 { font-size: 1.5rem; } }
.prose p { line-height: 1.625; color: hsl(var(--muted-foreground)); }
.prose ul { margin: 1rem 0; }
.prose li { color: hsl(var(--muted-foreground)); }
.prose li::marker { color: hsl(var(--brand-blue)); }
.prose blockquote {
  border-left: 4px solid hsl(var(--brand-pink));
  background: hsl(var(--brand-pink) / 0.05);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1rem 1.25rem;
  font-style: normal;
  color: hsl(var(--brand-dark));
  font-weight: 500;
}
.prose a { color: hsl(var(--brand-blue)); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* Blog single - optimized for readability */
.cc-single-prose {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: hsl(var(--foreground));
  max-width: 72ch;
}
.cc-single-prose p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
  color: hsl(var(--foreground) / 0.9);
  font-size: 1.0625rem;
}
.cc-single-prose p:last-child { margin-bottom: 0; }
.cc-single-prose h1, .cc-single-prose h2, .cc-single-prose h3, .cc-single-prose h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--brand-dark));
  line-height: 1.3;
}
.cc-single-prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  font-size: 1.375rem;
  border-bottom: 1px solid hsl(var(--border));
}
.cc-single-prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}
.cc-single-prose h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.1rem; }
.cc-single-prose ul, .cc-single-prose ol {
  margin: 1.25rem 0;
  padding-left: 1.5rem;
}
.cc-single-prose li {
  margin-bottom: 0.6rem;
  color: hsl(var(--foreground) / 0.9);
  line-height: 1.7;
}
.cc-single-prose li::marker { color: hsl(var(--brand-blue)); }
.cc-single-prose strong { font-weight: 600; color: hsl(var(--brand-dark)); }
.cc-single-prose blockquote {
  margin: 1.75rem 0;
  border-left: 4px solid hsl(var(--brand-blue));
  background: hsl(var(--brand-blue) / 0.06);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.25rem 1.5rem;
  font-style: normal;
  color: hsl(var(--brand-dark));
  font-weight: 500;
  line-height: 1.7;
}
.cc-single-prose a {
  color: hsl(var(--brand-blue));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-single-prose a:hover { color: hsl(var(--brand-pink)); }
@media (min-width: 640px) {
  .cc-single-prose { font-size: 1.125rem; }
  .cc-single-prose p { font-size: 1.125rem; }
  .cc-single-prose h2 { font-size: 1.5rem; margin-top: 3rem; }
  .cc-single-prose h3 { font-size: 1.3rem; }
}

/* Default page template readability */
.cc-page-shell {
  box-shadow: 0 20px 45px -30px rgb(15 23 42 / 0.18);
}
.cc-page-prose {
  font-size: 1.05rem;
  line-height: 1.8;
  color: hsl(var(--foreground));
  max-width: 74ch;
}
.cc-page-prose p {
  margin-bottom: 1.35rem;
  line-height: 1.82;
  color: hsl(var(--foreground) / 0.88);
}
.cc-page-prose p:last-child { margin-bottom: 0; }
.cc-page-prose h2,
.cc-page-prose h3,
.cc-page-prose h4 {
  color: hsl(var(--brand-dark));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.cc-page-prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 1.45rem;
}
.cc-page-prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}
.cc-page-prose h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}
.cc-page-prose ul,
.cc-page-prose ol {
  margin: 1.25rem 0;
  padding-left: 1.5rem;
}
.cc-page-prose li {
  margin-bottom: 0.6rem;
  color: hsl(var(--foreground) / 0.9);
  line-height: 1.7;
}
.cc-page-prose li::marker { color: hsl(var(--brand-blue)); }
.cc-page-prose strong {
  color: hsl(var(--brand-dark));
  font-weight: 700;
}
.cc-page-prose blockquote {
  margin: 1.75rem 0;
  border-left: 4px solid hsl(var(--brand-blue));
  background: hsl(var(--brand-blue) / 0.06);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.25rem 1.5rem;
  color: hsl(var(--brand-dark));
  font-weight: 500;
}
.cc-page-prose a {
  color: hsl(var(--brand-blue));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-page-prose a:hover { color: hsl(var(--brand-pink)); }
.cc-page-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.cc-page-prose th,
.cc-page-prose td {
  border: 1px solid hsl(var(--border));
  padding: 0.85rem 1rem;
  text-align: left;
}
.cc-page-prose th {
  background: hsl(var(--muted));
  color: hsl(var(--brand-dark));
  font-weight: 700;
}
@media (min-width: 640px) {
  .cc-page-prose { font-size: 1.125rem; }
  .cc-page-prose h2 { font-size: 1.65rem; }
  .cc-page-prose h3 { font-size: 1.3rem; }
}

/* Slick Testimonials Slider - custom arrows & dots (cc- prefix) */
.cc-testimonials-slider .slick-prev,
.cc-testimonials-slider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-122%);
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 9999px;
  background: hsl(var(--background)) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  cursor: pointer;
  transition: box-shadow 0.2s, color 0.2s, background 0.2s;
  color: hsl(var(--brand-dark)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
}
.cc-testimonials-slider .slick-prev:hover,
.cc-testimonials-slider .slick-next:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  color: hsl(var(--brand-dark)) !important;
  background: hsl(var(--background)) !important;
  opacity: 1 !important;
}
.cc-testimonials-slider .slick-prev svg,
.cc-testimonials-slider .slick-next svg {
  stroke: hsl(var(--brand-dark));
  flex-shrink: 0;
}
.cc-testimonials-slider .slick-prev:hover svg,
.cc-testimonials-slider .slick-next:hover svg {
  stroke: hsl(var(--brand-dark));
}
.cc-testimonials-slider .slick-prev { left: 0; }
.cc-testimonials-slider .slick-next { right: 0; }
.cc-testimonials-slider .slick-prev:before,
.cc-testimonials-slider .slick-next:before { display: none; }
.cc-testimonials-slider .slick-dots {
  position: relative;
  bottom: 0;
  margin-top: 2rem;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.cc-testimonials-slider .slick-dots li {
  margin: 0;
  width: auto;
  height: auto;
}
.cc-testimonials-slider .slick-dots li button {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 9999px;
  background: hsl(var(--brand-dark) / 0.2);
  opacity: 1;
  transition: width 0.3s ease, background 0.3s ease;
}
.cc-testimonials-slider .slick-dots li button:before {
  display: none;
}
.cc-testimonials-slider .slick-dots li.slick-active button {
  width: 1.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--brand-cyan));
}
@media (min-width: 640px) {
  .cc-testimonials-slider .slick-prev,
  .cc-testimonials-slider .slick-next { width: 2.5rem; height: 2.5rem; }
}

.cc-plugin-filter-btn.cc-active, .cc-blog-category-btn.cc-active { border-color: hsl(var(--brand-blue)); background: hsl(var(--brand-blue)); color: white; }

/* Toast notification (cc- prefix) */
.cc-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; }
.cc-toast { padding: 0.75rem 1rem; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 0.875rem; animation: slideDown 0.3s ease-out; }
.cc-toast.cc-success { background: #22c55e; color: white; }
.cc-toast.cc-error { background: #ef4444; color: white; }
.cc-toast.cc-bot { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; max-width: 20rem; }
/* Honeypot - hidden from users, visible to bots */
.cc-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; height: 0; overflow: hidden; }
.cc-hidden { display: none !important; }
.cc-nav-font { font-family: 'Poppins', sans-serif; }

/* Plugin & Blog filter buttons */
.cc-plugin-filter-btn.cc-active,
.cc-blog-category-btn.cc-active {
  border-color: hsl(var(--brand-blue));
  background: hsl(var(--brand-blue));
  color: white;
}

/* Homepage hero redesign */
.hero-section {
  background:
    radial-gradient(circle at top left, hsl(var(--brand-blue) / 0.18), transparent 32%),
    radial-gradient(circle at top right, hsl(var(--brand-pink) / 0.14), transparent 28%),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 42%, #fff7fb 100%);
}

.hero-pattern {
  background-image:
    linear-gradient(hsla(233, 82%, 15%, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, hsla(233, 82%, 15%, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 88%);
  opacity: 0.65;
}

.hero-glow {
  background:
    radial-gradient(circle, hsl(var(--brand-cyan) / 0.18) 0%, transparent 60%);
  filter: blur(18px);
}

.hero-image-card {
  box-shadow: 0 30px 80px rgba(7, 14, 70, 0.18);
  border-radius: 5px !important;
}

.hero-info-card {
  box-shadow: 0 16px 40px rgba(7, 14, 70, 0.12);
  border-radius: 5px !important;
}

.page-hero {
  background:
    radial-gradient(circle at top left, hsl(var(--brand-blue) / 0.16), transparent 30%),
    radial-gradient(circle at top right, hsl(var(--brand-pink) / 0.12), transparent 26%),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 46%, #fff7fb 100%);
}

.page-hero-pattern {
  background-image:
    linear-gradient(hsla(233, 82%, 15%, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, hsla(233, 82%, 15%, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 90%);
  opacity: 0.72;
}

.glass-panel {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(7, 14, 70, 0.1);
  border-radius: 5px !important;
}

.elevated-card {
  border: 1px solid hsl(var(--border) / 0.7);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 36px rgba(7, 14, 70, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-radius: 5px !important;
}

.elevated-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(7, 14, 70, 0.11);
  border-color: hsl(var(--brand-blue) / 0.22);
}

.dark-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 14, 70, 0.74);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.28);
  border-radius: 5px !important;
}

.section-band {
  border-top: 1px solid rgba(7, 14, 70, 0.05);
  border-bottom: 1px solid rgba(7, 14, 70, 0.05);
}

.section-band-blue {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 28%),
    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.05), transparent 26%),
    linear-gradient(180deg, #fcfdff 0%, #f4f8ff 100%);
}

.section-band-pink {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 28%),
    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.05), transparent 26%),
    linear-gradient(180deg, #fcfdff 0%, #f4f8ff 100%);
}

.section-band-cyan {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 28%),
    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.05), transparent 26%),
    linear-gradient(180deg, #fcfdff 0%, #f4f8ff 100%);
}

.section-band-neutral {
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

.hero-section .btn-sweep,
.page-hero .btn-sweep,
.page-hero .inline-flex,
.hero-section .inline-flex {
  border-radius: 5px !important;
}

.cc-blog-card:hover img,
.elevated-card:hover img {
  transform: scale(1.015) !important;
}

.process-grid {
  position: relative;
}

@media (min-width: 768px) {
  .process-grid::before {
    content: "";
    position: absolute;
    left: 16.66%;
    right: 16.66%;
    top: 4rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.35), rgba(6, 182, 212, 0.4), rgba(236, 72, 153, 0.35));
    z-index: 0;
  }
}

.process-step {
  position: relative;
  z-index: 1;
}

.process-icon-shell {
  box-shadow: 0 14px 34px rgba(7, 14, 70, 0.08);
}