/* Services & Pricing section: small style layer (layout uses Tailwind classes) */

#pricing { scroll-margin-top: 5rem; }

/* Clear, high-contrast focus for every interactive element in the section */
.svc-root :focus-visible,
.svc-dialog :focus-visible {
  outline: 3px solid #FBBF24;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Gentle reveal (under 200ms), switched off for people who prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .svc-panel:not([hidden]) { animation: svc-reveal 150ms ease-out; }
}
@keyframes svc-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Chevron rotates only when motion is allowed */
.svc-chevron { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .svc-chevron { transition: transform 150ms ease-out; }
}
[aria-expanded="true"] > .svc-chevron,
[aria-expanded="true"] .svc-chevron { transform: rotate(180deg); }

/* Quote dialog */
.svc-dialog {
  margin: auto;
  width: min(92vw, 34rem);
  max-height: 92vh;
  padding: 0;
  border: 1px solid #332E4A;
  border-radius: 1rem;
  background: #1A1726;
  color: #F1F5F9;
}
.svc-dialog::backdrop { background: rgba(10, 9, 18, 0.8); }

.svc-field {
  width: 100%;
  background: #221F33;
  border: 1px solid #4A4468;
  border-radius: 0.5rem;
  padding: 0.65rem 0.8rem;
  font-size: 1rem;
  color: #fff;
}
.svc-field:focus { border-color: #FF6B35; }

/* ---- Category grid: always an even 2x2 on desktop; opened options sit in a full-width row beneath ---- */
.svc-grid { display: block; }
.svc-cat { display: contents; }
.svc-head { margin-bottom: 1rem; }
.svc-panel-wrap { margin-bottom: 1rem; }
.svc-head-open { border-color: #FBBF24 !important; }

@media (min-width: 768px) {
  .svc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0;            /* spacing comes from margins so empty rows take no space */
    align-items: stretch;  /* the two cards in a row always match height */
  }
  .svc-head { grid-row: var(--row); grid-column: var(--col); }
  .svc-head > button { height: 100%; }
  .svc-panel-wrap { grid-row: var(--row); grid-column: 1 / -1; }
}