/* Ben & Co — delade stilar utöver Tailwind (brand guidelines v3) */

:root { --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); }
body { font-family: 'Fira Sans', Calibri, Helvetica, sans-serif; color: #1E2733; }

.shadow-card { box-shadow: 0 1px 2px rgba(26,43,66,0.05), 0 6px 20px -8px rgba(26,43,66,0.08); }

.btn-navy {
  background: #1A2B42; color: #fff;
  transition: transform .35s var(--ease-spring), background-color .2s ease;
}
.btn-navy:hover { background: #13202F; transform: translateY(-1px); }
.btn-navy:active { transform: translateY(0); }
.btn-navy:focus-visible { outline: 2px solid #1A2B42; outline-offset: 3px; }

.btn-outline {
  border: 1px solid #B9C2CE; color: #1A2B42;
  transition: transform .35s var(--ease-spring), border-color .2s ease;
}
.btn-outline:hover { border-color: #1A2B42; transform: translateY(-1px); }
.btn-outline:active { transform: translateY(0); }
.btn-outline:focus-visible { outline: 2px solid #1A2B42; outline-offset: 3px; }

.btn-marigold {
  background: #F5A623; color: #1A2B42;
  transition: transform .3s var(--ease-spring), background-color .2s ease;
}
.btn-marigold:hover { background: #E0930F; transform: translateY(-2px); }
.btn-marigold:active { transform: translateY(0); }
.btn-marigold:focus-visible { outline: 2px solid #F5A623; outline-offset: 4px; }

.nav-link { position: relative; color: #5A6675; transition: color .2s ease; }
.nav-link:hover { color: #1A2B42; }
.nav-link[aria-current="page"] { color: #1A2B42; font-weight: 600; }
.nav-link:focus-visible { outline: 2px solid #1A2B42; outline-offset: 4px; }
.nav-link:active { color: #13202F; }

.link-quiet { color: #8F5B05; transition: color .2s ease; }
.link-quiet:hover { color: #1A2B42; }
.link-quiet:focus-visible { outline: 2px solid #1A2B42; outline-offset: 3px; }
.link-quiet:active { color: #13202F; }

.footer-link { transition: color .2s ease; }
.footer-link:hover { color: #F5A623; }
.footer-link:focus-visible { outline: 2px solid #F5A623; outline-offset: 3px; }
.footer-link:active { color: #E0930F; }

.rule-accent { width: 48px; height: 2px; background: #F5A623; }

/* Formulär (kontakt) */
.field-input {
  border: 1px solid #B9C2CE; background: #fff; color: #1E2733;
  transition: border-color .2s ease;
}
.field-input:hover { border-color: #8A93A0; }
.field-input:focus-visible { outline: 2px solid #1A2B42; outline-offset: 1px; border-color: #1A2B42; }
.field-input.is-invalid { border-color: #8F5B05; }
.field-error { color: #8F5B05; }

/* Automationsflöde i heron — en 7s-loop: puls in → motorn arbetar → pulser ut → klart */
.pulse { opacity: 0; }
@supports (offset-path: path('M0 0 L1 1')) {
  .pulse-in {
    offset-path: path('M170 112 L170 150 Q170 162 182 162 L232 162');
    animation: travel-in 7s linear infinite;
  }
  .pulse-out-l {
    offset-path: path('M260 226 L260 250 Q260 262 248 262 L102 262 Q90 262 90 274 L90 296');
    animation: travel-out 7s linear infinite;
  }
  .pulse-out-m {
    offset-path: path('M260 226 L260 296');
    animation: travel-out 7s linear infinite;
    animation-delay: .12s;
  }
  .pulse-out-r {
    offset-path: path('M260 226 L260 250 Q260 262 272 262 L418 262 Q430 262 430 274 L430 296');
    animation: travel-out 7s linear infinite;
    animation-delay: .24s;
  }
}
@keyframes travel-in {
  0%, 6%   { offset-distance: 0%; opacity: 0; }
  9%       { opacity: 1; }
  24%      { opacity: 1; }
  27%, 100%{ offset-distance: 100%; opacity: 0; }
}
@keyframes travel-out {
  0%, 36%  { offset-distance: 0%; opacity: 0; }
  39%      { opacity: 1; }
  52%      { opacity: 1; }
  55%, 100%{ offset-distance: 100%; opacity: 0; }
}
.engine-ring {
  transform-box: fill-box; transform-origin: center;
  animation: ring-pulse 7s ease-out infinite;
}
@keyframes ring-pulse {
  0%, 26%   { transform: scale(1); opacity: .9; }
  30%       { transform: scale(1); opacity: .9; }
  40%       { transform: scale(1.35); opacity: 0; }
  41%, 100% { transform: scale(1); opacity: .9; }
}
.check {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(.5);
  animation: check-pop 7s var(--ease-spring) infinite;
}
.check-m { animation-delay: .15s; }
.check-r { animation-delay: .3s; }
@keyframes check-pop {
  0%, 55%   { opacity: 0; transform: scale(.5); }
  61%       { opacity: 1; transform: scale(1); }
  88%       { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { display: none; }
  .engine-ring { animation: none; opacity: .9; }
  .check { animation: none; opacity: 1; transform: scale(1); }
  .check-m, .check-r { animation-delay: 0s; }
}