/* shadcn/ui-inspired primitives for server-rendered Django templates.
   Preserve editorial layout and brand colors; only refine component surfaces. */
:root {
  --ui-background:#fbfaf7;
  --ui-foreground:#193331;
  --ui-primary:#0e7c7b;
  --ui-primary-foreground:#fff;
  --ui-muted:#edf1ed;
  --ui-muted-foreground:#5c6d67;
  --ui-border:#dce3dd;
  --ui-ring:#0e7c7b;
  --ui-radius:8px;
  --ui-shadow:0 1px 2px rgba(25,51,49,.05);
}
/* Default, outline and ghost buttons share sizing and visible focus feedback. */
.button,.nav-toggle {
  min-height:44px;border-radius:var(--ui-radius);font-size:14px;font-weight:500;
  letter-spacing:0;gap:12px;box-shadow:var(--ui-shadow);
  transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease,transform 160ms ease;
}
.hero-actions .button {min-height:50px;padding-inline:24px}
.button.secondary {background:#fff;border-color:var(--ui-border);color:var(--ui-foreground)}
.button.secondary:hover,.nav-toggle:hover {background:var(--ui-muted)}
.button:focus-visible,.nav-toggle:focus-visible,.category-filters button:focus-visible,
.faq-list summary:focus-visible {
  outline:2px solid var(--ui-ring);outline-offset:3px;
  box-shadow:0 0 0 4px rgba(14,124,123,.12);
}
.button:disabled {pointer-events:none;opacity:.5}
/* Card, badge and separator primitives retain existing content silhouettes. */
.content-card {border-color:var(--ui-border);border-radius:12px;box-shadow:var(--ui-shadow)}
.content-card:hover {box-shadow:0 8px 24px rgba(25,51,49,.07);transform:translateY(-2px)}
.care-card {border-color:var(--ui-border);border-radius:12px;box-shadow:0 12px 32px rgba(25,51,49,.09)}
.badge,.image-badge {
  font-size:12px;font-weight:500;line-height:1.5;padding:3px 10px;
  border:1px solid #d6e5dc;border-radius:6px;background:#eff5f0;color:#365e4e;
}
.card-bottom,.story-principle,.footer-bottom {border-color:var(--ui-border)}
/* Toggle-group appearance; existing aria-pressed semantics remain filters. */
.category-filters {
  display:flex;flex-wrap:wrap;gap:6px;overflow:visible;width:fit-content;max-width:100%;
  padding:5px;margin-bottom:32px;border:1px solid var(--ui-border);
  border-radius:10px;background:#e8eee7;
}
.category-filters button {
  min-height:44px;padding:10px 14px;border:1px solid transparent;border-radius:6px;
  font-size:14px;font-weight:500;color:var(--ui-muted-foreground);white-space:normal;
  transition:background-color 160ms ease,box-shadow 160ms ease;
}
.category-filters button:hover {background:#f5f7f3;color:var(--ui-foreground)}
.category-filters button.active {
  background:#fff;border-color:var(--ui-border);color:var(--ui-primary);
  box-shadow:var(--ui-shadow);font-weight:600;
}
/* Native inputs use the same quiet border, inset spacing and ring vocabulary. */
.form-grid {gap:20px}
.form-grid label {gap:8px;font-size:14px;font-weight:500;line-height:1.5}
.form-grid input,.form-grid select,.form-grid textarea {
  min-height:44px;padding:10px 12px;border:1px solid #bdcbc2;
  border-radius:6px;background:#fff;font-size:16px;line-height:1.5;
  box-shadow:var(--ui-shadow);transition:box-shadow 160ms ease,border-color 160ms ease;
}
.form-grid input::placeholder,.form-grid textarea::placeholder {color:var(--ui-muted-foreground)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus {
  outline:none;border-color:var(--ui-ring);box-shadow:0 0 0 3px rgba(14,124,123,.18);
}
.form-grid [aria-invalid=true] {border-color:#b42318;box-shadow:0 0 0 3px rgba(180,35,24,.1)}
.form-error {font-size:13px;font-weight:400;color:#b42318;line-height:1.5}
.inquiry form {border:1px solid var(--ui-border);border-radius:14px;box-shadow:0 12px 32px rgba(0,40,38,.1)}
.consent {min-height:44px;font-size:14px;align-items:center;line-height:1.6}
.consent input {flex-shrink:0}
[data-form-status]:empty {display:none}
[data-form-status]:not(:empty) {
  margin:16px 0 0;padding:12px 14px;border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);background:var(--ui-muted);font-size:14px;
}
/* Accordion uses a chevron instead of a decorative plus, with native details behavior. */
.faq-list details {padding:0;border-color:var(--ui-border)}
.faq-list summary {min-height:64px;padding:20px 0;font-size:16px;font-weight:500;border-radius:4px}
.faq-list summary:hover {color:var(--ui-primary)}
.faq-toggle {font-size:0;width:16px;height:16px;display:grid;place-items:center;flex-shrink:0}
.faq-toggle::after {
  content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
}
.faq-list details[open] .faq-toggle {transform:rotate(180deg)}
.faq-list details>div {padding-top:0;padding-bottom:22px;font-size:15px;line-height:1.8}
@media(max-width:700px) {
  .category-filters {width:100%;gap:4px}
  .category-filters button {flex:1 0 auto;padding:10px 12px}
  .faq-list summary {font-size:15px}
}
@media(prefers-reduced-motion:reduce) {
  .button,.content-card,.category-filters button,.form-grid input,.form-grid select {transition:none}
}