/* Web Design Ireland - Custom Stylesheet */
/* Reusable classes for consistency across all pages */

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

/* ===== Custom Selection ===== */
::selection {
  background-color: rgba(5, 150, 105, 0.2);
  color: #0f172a;
}

/* ===== COMPREHENSIVE CTA & Tailwind Theme Fallbacks (Site-Wide) ===== */
/* These ensure blog content using Tailwind theme classes always renders correctly */

/* Primary background colour fallback */
.bg-primary {
  background-color: #059669;
}
.bg-primary-50, [class~="bg-primary-50"] {
  background-color: #ecfdf5;
}

/* Primary text colour fallback */
.text-primary {
  color: #059669;
}

/* Primary content (white text on primary bg) fallback */
.text-primary-content {
  color: #ffffff;
}

/* White text fallback */
.text-white {
  color: #ffffff;
}

/* Ensure ALL links/buttons inside bg-primary sections have visible text */
.bg-primary a,
.bg-primary button,
[style*="background-color:#059669"] a,
[style*="background-color: #059669"] a {
  text-decoration: none;
}

/* WHITE buttons inside green/primary CTA sections = green text */
.bg-primary a.bg-white,
.bg-primary a[class*="bg-white"],
div[class*="bg-primary"] a.bg-white,
div[class*="bg-primary"] a[class*="bg-white"],
.bg-gradient-to-r a.bg-white,
.bg-gradient-to-br a.bg-white {
  color: #059669 !important;
  background-color: #ffffff !important;
}
.bg-primary a.bg-white:hover,
div[class*="bg-primary"] a[class*="bg-white"]:hover,
.bg-gradient-to-r a.bg-white:hover,
.bg-gradient-to-br a.bg-white:hover {
  color: #047857 !important;
  background-color: #f1f5f9 !important;
}

/* GREEN buttons (bg-primary on the button itself) = white text */
a.bg-primary,
button.bg-primary,
a[class~="bg-primary"],
a[style*="background-color:#059669"],
a[style*="background-color: #059669"] {
  color: #ffffff !important;
  background-color: #059669 !important;
}
a.bg-primary:hover,
a[class~="bg-primary"]:hover {
  background-color: #047857 !important;
  color: #ffffff !important;
}

/* Fix text-primary on standalone buttons/links (green text) */
a.text-primary,
button.text-primary,
a[class~="text-primary"] {
  color: #059669 !important;
}
a.text-primary:hover,
a[class~="text-primary"]:hover {
  color: #047857 !important;
}

/* Ensure headings and text inside bg-primary sections are white */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4,
.bg-primary p, .bg-primary span, .bg-primary div {
  color: #ffffff;
}
.bg-primary p[class*="opacity"],
.bg-primary p[class*="\/85"],
.bg-primary p[class*="\/90"] {
  color: rgba(255, 255, 255, 0.85);
}

/* =====  DARK Gradient Sections Only — White Text ===== */
/* Only apply white text on explicitly DARK gradient backgrounds */
/* Uses wdi-hero-gradient and wdi-cta-gradient helper classes, */
/* plus inline-styled dark sections. NOT on light gradients. */
.wdi-hero-gradient h1, .wdi-hero-gradient h2, .wdi-hero-gradient h3,
.wdi-hero-gradient p,
.wdi-cta-gradient h1, .wdi-cta-gradient h2, .wdi-cta-gradient h3,
.wdi-cta-gradient p {
  color: #ffffff;
}

/* Dark inline-background sections: only target sections with dark backgrounds */
section[style*="background:linear-gradient"][style*="#0f172a"] h1,
section[style*="background:linear-gradient"][style*="#0f172a"] h2,
section[style*="background:linear-gradient"][style*="#0f172a"] h3,
section[style*="background:linear-gradient"][style*="#0f172a"] p,
section[style*="background:linear-gradient"][style*="#1e3a5f"] h1,
section[style*="background:linear-gradient"][style*="#1e3a5f"] h2,
section[style*="background:linear-gradient"][style*="#1e3a5f"] h3,
section[style*="background:linear-gradient"][style*="#1e3a5f"] p {
  color: #ffffff;
}

/* CTA sections with inline dark backgrounds */
div[style*="background"] a[style*="background-color:#059669"],
div[style*="background"] a[style*="background-color: #059669"] {
  color: #ffffff !important;
}

/* Rounded box/button/input theme fallbacks */
.rounded-box {
  border-radius: 0.75rem;
}
.rounded-btn {
  border-radius: 0.375rem;
}

/* Border and subtle text fallbacks */
.border-border {
  border-color: #e2e8f0;
}
.text-subtle {
  color: #64748b;
}
.text-heading {
  color: #0f172a;
}
.bg-base-100 {
  background-color: #f8fafc;
}
.bg-base-50 {
  background-color: #fafbfc;
}

/* Primary with opacity variants */
.bg-primary\/10, [class*="bg-primary/10"] {
  background-color: rgba(5, 150, 105, 0.1);
}
.bg-primary\/20, [class*="bg-primary/20"] {
  background-color: rgba(5, 150, 105, 0.2);
}
.border-primary\/20, [class*="border-primary/20"] {
  border-color: rgba(5, 150, 105, 0.2);
}
.text-primary-content\/85 {
  color: rgba(255, 255, 255, 0.85);
}
.text-primary-content\/90 {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== Details/Summary Accordion ===== */
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details[open] summary svg {
  transform: rotate(180deg);
}
details summary svg {
  transition: transform 0.2s ease;
}

/* ===== Section Containers ===== */
.wdi-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .wdi-section { padding-top: 5rem; padding-bottom: 5rem; }
}
@media (min-width: 1024px) {
  .wdi-section { padding-top: 6rem; padding-bottom: 6rem; }
}

.wdi-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .wdi-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .wdi-container { padding-left: 2rem; padding-right: 2rem; }
}

.wdi-narrow {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Typography ===== */
.wdi-hero-title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: #0f172a;
}
@media (min-width: 768px) {
  .wdi-hero-title { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .wdi-hero-title { font-size: 3.75rem; }
}

.wdi-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
}
@media (min-width: 768px) {
  .wdi-section-title { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .wdi-section-title { font-size: 2.25rem; }
}

.wdi-subsection-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
}
@media (min-width: 768px) {
  .wdi-subsection-title { font-size: 1.5rem; }
}

.wdi-body {
  font-size: 1rem;
  line-height: 1.75;
  color: #475569;
}
@media (min-width: 768px) {
  .wdi-body { font-size: 1.125rem; }
}

.wdi-small {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #64748b;
}

.wdi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

/* ===== Colour Utilities ===== */
.wdi-bg-dark { background-color: #0f172a; }
.wdi-bg-navy { background-color: #1e3a5f; }
.wdi-bg-light { background-color: #f8fafc; }
.wdi-bg-green { background-color: #059669; }
.wdi-text-navy { color: #1e3a5f; }
.wdi-text-green { color: #059669; }
.wdi-text-muted { color: #64748b; }
.wdi-text-body { color: #475569; }
.wdi-text-heading { color: #0f172a; }

/* ===== Buttons ===== */
.wdi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .wdi-btn { padding: 0.875rem 2rem; font-size: 1rem; }
}

.wdi-btn-primary {
  background-color: #059669;
  color: #ffffff !important;
}
.wdi-btn-primary:hover {
  background-color: #047857;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.35);
}
.wdi-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
}

.wdi-btn-secondary {
  background-color: transparent;
  color: #1e3a5f;
  border: 2px solid #1e3a5f;
}
.wdi-btn-secondary:hover {
  background-color: #1e3a5f;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 58, 95, 0.25);
}

.wdi-btn-outline-white {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.wdi-btn-outline-white:hover {
  background-color: #ffffff;
  color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
}

.wdi-btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .wdi-btn-lg { padding: 1.125rem 2.5rem; font-size: 1.125rem; }
}

/* Button shimmer effect on hover */
.wdi-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}
.wdi-btn-primary:hover::after {
  left: 100%;
}

/* ===== Cards ===== */
.wdi-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
  .wdi-card { padding: 2rem; }
}

.wdi-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.wdi-card-interactive {
  cursor: pointer;
}
.wdi-card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border-color: #059669;
}
.wdi-card-interactive:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.wdi-card-highlight {
  border-left: 4px solid #059669;
  background-color: #f8fafc;
}

/* Card green top accent on hover */
.wdi-card-accent {
  position: relative;
  overflow: hidden;
}
.wdi-card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #059669;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wdi-card-accent:hover::before {
  transform: scaleX(1);
}

/* ===== Links ===== */
.wdi-link {
  color: #059669;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
}
.wdi-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #059669;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wdi-link:hover {
  color: #047857;
}
.wdi-link:hover::after {
  width: 100%;
}

/* ===== Blog Content Links (auto-styled) ===== */
.wdi-blog-content a {
  color: #059669;
  text-decoration: underline;
  text-decoration-color: rgba(5, 150, 105, 0.4);
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.wdi-blog-content a:hover {
  color: #047857;
  text-decoration-color: #047857;
}
/* Don't override button styles within blog content */
.wdi-blog-content .wdi-btn,
.wdi-blog-content .wdi-btn-primary,
.wdi-blog-content .wdi-btn-secondary {
  text-decoration: none;
}

/* Arrow link with animated arrow */
.wdi-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #059669;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.wdi-link-arrow svg,
.wdi-link-arrow .arrow {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wdi-link-arrow:hover {
  color: #047857;
  gap: 0.625rem;
}
.wdi-link-arrow:hover svg,
.wdi-link-arrow:hover .arrow {
  transform: translateX(3px);
}

.wdi-link-nav {
  color: #334155;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  text-decoration: none;
}
.wdi-link-nav:hover {
  background-color: #f8fafc;
  color: #059669;
}

/* ===== Badges and Tags ===== */
.wdi-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.wdi-badge-green {
  background-color: rgba(5, 150, 105, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(5, 150, 105, 0.3);
}

.wdi-badge-navy {
  background-color: rgba(30, 58, 95, 0.1);
  color: #1e3a5f;
  border: 1px solid rgba(30, 58, 95, 0.2);
}

/* Pulsing dot for live/active badges */
.wdi-badge-pulse::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #34d399;
  animation: wdi-pulse 2s infinite;
}
@keyframes wdi-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

/* ===== Stat Counters ===== */
.wdi-stat-number {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1e3a5f;
}
@media (min-width: 768px) {
  .wdi-stat-number { font-size: 2.25rem; }
}

.wdi-stat-label {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

/* ===== Form Elements ===== */
.wdi-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  transition: all 0.25s ease;
  background-color: #ffffff;
}
.wdi-input:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
.wdi-input:hover:not(:focus) {
  border-color: #94a3b8;
}

.wdi-textarea {
  min-height: 8rem;
  resize: vertical;
}

/* ===== Hero Gradients ===== */
.wdi-hero-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}

.wdi-hero-gradient-green {
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
}

.wdi-cta-gradient {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
}

/* ===== Image Treatments ===== */
.wdi-img-rounded {
  border-radius: 1rem;
  overflow: hidden;
}

.wdi-img-shadow {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.wdi-img-hover {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.wdi-img-hover:hover {
  transform: scale(1.05);
}

/* Image reveal on scroll */
.wdi-img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.wdi-img-reveal.visible {
  clip-path: inset(0 0 0 0);
}

/* ===== Grid Pattern Background ===== */
.wdi-grid-bg {
  position: relative;
}
.wdi-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ===== Dividers ===== */
.wdi-divider {
  border: none;
  height: 1px;
  background-color: #e2e8f0;
  margin: 2rem 0;
}

/* Gradient divider */
.wdi-divider-gradient {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #059669, transparent);
  margin: 2rem 0;
}

/* ===== Breadcrumbs ===== */
.wdi-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #64748b;
  padding: 1rem 0;
}
.wdi-breadcrumb a {
  color: #059669;
  text-decoration: none;
  transition: color 0.15s ease;
}
.wdi-breadcrumb a:hover {
  color: #047857;
  text-decoration: underline;
}
.wdi-breadcrumb span.separator {
  color: #cbd5e1;
}

/* ===== Skip Navigation (Accessibility) ===== */
.wdi-skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.5rem;
  background-color: #059669;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}
.wdi-skip-nav:focus {
  left: 0;
}

/* ===== Focus Styles (Accessibility) ===== */
*:focus-visible {
  outline: 2px solid #059669;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Scroll Animations ===== */
.wdi-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.wdi-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.wdi-slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.wdi-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.wdi-slide-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.wdi-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up from small */
.wdi-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.wdi-scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children animation */
.wdi-stagger > * {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.wdi-stagger.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.wdi-stagger.visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.wdi-stagger.visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.wdi-stagger.visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.wdi-stagger.visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.wdi-stagger.visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.wdi-stagger.visible > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }
.wdi-stagger.visible > *:nth-child(8) { transition-delay: 560ms; opacity: 1; transform: translateY(0); }

/* ===== Gradient Text ===== */
.wdi-gradient-text {
  background: linear-gradient(135deg, #059669 0%, #1e3a5f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Glassmorphism ===== */
.wdi-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.wdi-glass-dark {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Glow Effects ===== */
.wdi-glow-green {
  box-shadow: 0 0 20px rgba(5, 150, 105, 0.15);
}
.wdi-glow-green:hover {
  box-shadow: 0 0 40px rgba(5, 150, 105, 0.25);
}

/* ===== Table of Contents (for long guides) ===== */
.wdi-toc {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
}
.wdi-toc-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.75rem;
}
.wdi-toc a {
  display: block;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: #475569;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  transition: all 0.2s ease;
}
.wdi-toc a:hover {
  color: #059669;
  border-left-color: #059669;
  padding-left: 1rem;
}

/* ===== County Grid ===== */
.wdi-county-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .wdi-county-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .wdi-county-grid { grid-template-columns: repeat(4, 1fr); }
}

.wdi-county-link {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #334155;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  position: relative;
}
.wdi-county-link:hover {
  background-color: #f0fdf4;
  color: #059669;
  padding-left: 1rem;
}

/* ===== Testimonial ===== */
.wdi-testimonial {
  background-color: #f8fafc;
  border-left: 4px solid #059669;
  padding: 1.5rem 2rem;
  border-radius: 0 0.75rem 0.75rem 0;
  transition: all 0.3s ease;
}
.wdi-testimonial:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-left-width: 6px;
}
.wdi-testimonial-text {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #334155;
  font-style: italic;
}
.wdi-testimonial-author {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}
.wdi-testimonial-role {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 400;
}

/* ===== Reading Progress Bar - Hidden ===== */
.wdi-reading-progress {
  display: none !important;
}

/* ===== Number Counter Animation ===== */
.wdi-counter {
  font-variant-numeric: tabular-nums;
}

/* ===== Marquee / Scrolling Text ===== */
.wdi-marquee {
  overflow: hidden;
  white-space: nowrap;
}
.wdi-marquee-inner {
  display: inline-block;
  animation: wdi-scroll 30s linear infinite;
}
@keyframes wdi-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Skeleton Loading ===== */
.wdi-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: wdi-shimmer 1.5s infinite;
  border-radius: 0.375rem;
}
@keyframes wdi-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Tooltip ===== */
.wdi-tooltip {
  position: relative;
}
.wdi-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  background-color: #0f172a;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wdi-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* ===== Responsive Utility ===== */
.wdi-hide-mobile { display: none; }
@media (min-width: 768px) {
  .wdi-hide-mobile { display: block; }
}
.wdi-hide-desktop { display: block; }
@media (min-width: 768px) {
  .wdi-hide-desktop { display: none; }
}

/* ===== Hover Lift for any element ===== */
.wdi-hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.wdi-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* ===== Animated Underline Links ===== */
.wdi-underline-grow {
  position: relative;
  text-decoration: none;
}
.wdi-underline-grow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #059669;
  transition: width 0.3s ease, left 0.3s ease;
}
.wdi-underline-grow:hover::after {
  width: 100%;
  left: 0;
}

/* ===== Icon Circle Backgrounds ===== */
.wdi-icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.wdi-icon-circle-green {
  background-color: #f0fdf4;
  color: #059669;
}
.wdi-icon-circle-green:hover,
*:hover > .wdi-icon-circle-green {
  background-color: #059669;
  color: #ffffff;
  transform: scale(1.1);
}
.wdi-icon-circle-navy {
  background-color: #eff4fa;
  color: #1e3a5f;
}

/* ===== Floating label for form inputs ===== */
.wdi-float-label {
  position: relative;
}
.wdi-float-label input,
.wdi-float-label textarea {
  padding-top: 1.25rem;
}
.wdi-float-label label {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  font-size: 0.875rem;
  color: #94a3b8;
  pointer-events: none;
  transition: all 0.2s ease;
}
.wdi-float-label input:focus + label,
.wdi-float-label input:not(:placeholder-shown) + label,
.wdi-float-label textarea:focus + label,
.wdi-float-label textarea:not(:placeholder-shown) + label {
  top: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== Responsive Video Embed ===== */
.wdi-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.wdi-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== Print Styles ===== */
@media print {
  header, footer, .wdi-skip-nav, .wdi-reading-progress { display: none !important; }
  .wdi-section { padding: 1rem 0; }
  .wdi-card { border: 1px solid #ccc; box-shadow: none; }
  a { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}