/* Vital SEO — temporary homepage design experiment */

/* Square structural frames */
.hero-panel,
.hero-panel::before,
.hero-panel .metric,
.hero-panel .signal,
.hero-panel .signal-line,
.hero-panel .signal-line::after,
main .card,
main .card-icon,
main .cta-band {
  border-radius: 0 !important;
}

/* Rounded specialist information panel */
main .quote {
  border-radius: 12px !important;
}

/* Rounded clickable calls to action */
main .btn {
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(25, 55, 90, 0.12) !important;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* Hover: slightly raised */
main .btn:hover {
  box-shadow: 0 8px 20px rgba(25, 55, 90, 0.18) !important;
  transform: translateY(-2px);
}

/* Press: tactile feedback */
main .btn:active {
  box-shadow: 0 2px 5px rgba(25, 55, 90, 0.12) !important;
  transform: translateY(1px);
}

/* Dark mode button depth */
html[data-theme="dark"] main .btn {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] main .btn:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] main .btn:active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  main .btn {
    transition: none !important;
  }

  main .btn:hover,
  main .btn:active {
    transform: none !important;
  }
}

/* Clickable SEO support cards: rounded */
main .cards .card {
  border-radius: 10px !important;
}

/* Informational specialist panel: square */
main .quote {
  border-radius: 0 !important;
}

/* Experiment 4 — more pronounced clickable card rounding */
main .cards .card {
  border-radius: 22px !important;
}

/* Experiment 5 — consistent rounding for clickable elements */
main .btn,
main .cards .card {
  border-radius: 22px !important;
}

/* Experiment 6 — 26px rounding for clickable elements */
main .btn,
main .cards .card {
  border-radius: 26px !important;
}

/* Dark mode toggle — rounded clickable control */
.theme-toggle {
  border-radius: 26px !important;
  box-shadow: 0 4px 12px rgba(25, 55, 90, 0.12) !important;
  transition: box-shadow .18s ease, transform .18s ease;
}

.theme-toggle:hover {
  box-shadow: 0 8px 20px rgba(25, 55, 90, 0.18) !important;
  transform: translateY(-2px);
}

.theme-toggle:active {
  box-shadow: 0 2px 5px rgba(25, 55, 90, 0.12) !important;
  transform: translateY(1px);
}

html[data-theme="dark"] .theme-toggle {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none !important;
  }

  .theme-toggle:hover,
  .theme-toggle:active {
    transform: none !important;
  }
}

/* Experiment 7 — refined homepage visual hierarchy */

/* Informational specialist panel: square with softer shadow */
main .quote {
  border-radius: 0 !important;
  box-shadow: 0 4px 14px rgba(25, 55, 90, 0.045) !important;
}

/* Buttons: slightly less rounded than clickable cards */
main .btn,
.theme-toggle {
  border-radius: 16px !important;
}

/* Clickable cards retain the stronger 26px rounding */
main .cards .card {
  border-radius: 26px !important;
}

/* Specialist panel in dark mode */
html[data-theme="dark"] main .quote {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

/* Experiment 8 — stronger interaction feedback on clickable frames */

/* Clickable service cards */
main .cards .card:hover {
  box-shadow: 0 14px 32px rgba(25, 55, 90, 0.22) !important;
}

main .cards .card:active {
  box-shadow: 0 3px 8px rgba(25, 55, 90, 0.10) !important;
  transform: translateY(1px);
}

/* Buttons */
main .btn:hover,
.theme-toggle:hover {
  box-shadow: 0 10px 24px rgba(25, 55, 90, 0.25) !important;
}

main .btn:active,
.theme-toggle:active {
  box-shadow: 0 2px 5px rgba(25, 55, 90, 0.10) !important;
  transform: translateY(1px);
}

/* Dark mode */
html[data-theme="dark"] main .cards .card:hover,
html[data-theme="dark"] main .btn:hover,
html[data-theme="dark"] .theme-toggle:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42) !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  main .cards .card:active,
  main .btn:active,
  .theme-toggle:active {
    transform: none !important;
  }
}

/* TEMPORARY TEST: Homepage service cards — 10% hover enlargement */
@media (hover: hover) and (pointer: fine) {
  .homepage-service-cards > a.card {
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
  }

  .homepage-service-cards > a.card:hover {
    transform: scale(1.10) !important;
    z-index: 5;
    box-shadow: 0 18px 42px rgba(25, 55, 90, .24) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-service-cards > a.card {
    transition: none !important;
  }

  .homepage-service-cards > a.card:hover {
    transform: none !important;
  }
}

/* TEMPORARY TEST: Homepage buttons — 10% hover enlargement */
@media (hover: hover) and (pointer: fine) {
  body.home main .btn {
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
  }

  body.home main .btn:hover {
    transform: scale(1.10) !important;
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home main .btn:hover {
    transform: none !important;
  }
}

/* TEMPORARY TEST: Desktop navigation — 10% hover enlargement */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .nav-list > .nav-item > .nav-link,
  .nav-list > .nav-item > .nav-parent-row > .nav-link {
    position: relative;
    transition: transform .22s ease, background-color .18s ease, color .18s ease;
    transform-origin: center;
  }

  .nav-list > .nav-item > .nav-link:hover,
  .nav-list > .nav-item > .nav-parent-row > .nav-link:hover {
    transform: scale(1.10);
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-list > .nav-item > .nav-link:hover,
  .nav-list > .nav-item > .nav-parent-row > .nav-link:hover {
    transform: none !important;
  }
}

/* TEMPORARY TEST: Desktop dropdown links — 10% hover enlargement */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .dropdown a,
  .nested-dropdown a {
    position: relative;
    transform-origin: center;
    transition: transform .22s ease, background-color .18s ease, color .18s ease;
  }

  .dropdown a:hover,
  .nested-dropdown a:hover {
    transform: scale(1.10);
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown a:hover,
  .nested-dropdown a:hover {
    transform: none !important;
  }
}

/* Homepage Get Started button cursor */
.hero-panel-start {
  cursor: pointer;
}