/*
 * Public Design System — Dr. Hau Nguyen
 *
 * Sibling to admin_design_system.css. Same typographic & shadow DNA so the
 * public site and admin feel like one product, but the public surface keeps
 * its own brand identity (sky/teal accent, lighter cards).
 *
 * Used by every page rendered through layouts/application.html.haml.
 */

:root {
  /* Brand */
  --pub-primary:        #0EA5E9;   /* sky-500 */
  --pub-primary-dark:   #0284C7;   /* sky-600 */
  --pub-primary-soft:   #E0F2FE;   /* sky-100 */
  --pub-accent:         #C9922A;   /* gold — same as admin --aa */
  --pub-accent-soft:    rgba(201, 146, 42, .12);

  /* Neutrals */
  --pub-ink-900: #0F172A;
  --pub-ink-700: #334155;
  --pub-ink-500: #64748B;
  --pub-ink-300: #CBD5E1;
  --pub-ink-100: #F1F5F9;

  /* Surfaces */
  --pub-bg:          #F0F9FF;   /* sky-50 */
  --pub-card-bg:     #FFFFFF;
  --pub-card-border: #BAE6FD;   /* sky-200 */

  /* Typography — same fonts as admin */
  --pub-font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;
  --pub-font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Shadows — match admin's "soft editorial" scale */
  --pub-shadow-card:       0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.05);
  --pub-shadow-card-hover: 0 4px 8px rgba(15,23,42,.06), 0 12px 28px rgba(14,165,233,.12);
  --pub-shadow-focus:      0 0 0 3px rgba(14, 165, 233, .25);

  /* Radii */
  --pub-radius-sm: 10px;
  --pub-radius-md: 14px;
  --pub-radius-lg: 20px;
  --pub-radius-pill: 9999px;
}

/* ===== Typography ===== */
body { font-family: var(--pub-font-ui); }

/* Headings — Instrument Serif for hero / section titles (opt-in via class) */
.pub-display {
  font-family: var(--pub-font-heading);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* ===== Card primitives ===== */
.pub-card {
  background: var(--pub-card-bg);
  border: 1px solid var(--pub-card-border);
  border-radius: var(--pub-radius-lg);
  box-shadow: var(--pub-shadow-card);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.pub-card--hover:hover {
  box-shadow: var(--pub-shadow-card-hover);
  transform: translateY(-2px);
  border-color: #7DD3FC;   /* sky-300 */
}
@media (hover: none) {
  .pub-card--hover:hover { transform: none; box-shadow: var(--pub-shadow-card); }
}

/* ===== Button primitives ===== */
.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  border-radius: var(--pub-radius-sm);
  font-weight: 600;
  font-family: var(--pub-font-ui);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.pub-btn:active { transform: translateY(1px); }
.pub-btn:focus-visible { outline: none; box-shadow: var(--pub-shadow-focus); }

.pub-btn--primary {
  background: var(--pub-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(14, 165, 233, .25);
}
.pub-btn--primary:hover { background: var(--pub-primary-dark); }

.pub-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.65);
}
.pub-btn--ghost:hover { background: #fff; color: var(--pub-primary-dark); }

.pub-btn--outline {
  background: #fff;
  color: var(--pub-ink-700);
  border-color: var(--pub-card-border);
}
.pub-btn--outline:hover { background: var(--pub-primary-soft); border-color: #7DD3FC; }

.pub-btn--full { width: 100%; }

/* ===== Input primitive ===== */
.pub-input,
.pub-input:is(textarea, select) {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--pub-card-border);
  background: #fff;
  color: var(--pub-ink-900);
  border-radius: var(--pub-radius-sm);
  font-size: .95rem;
  font-family: var(--pub-font-ui);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.pub-input:focus {
  border-color: var(--pub-primary);
  box-shadow: var(--pub-shadow-focus);
}
.pub-input::placeholder { color: var(--pub-ink-500); }
.pub-input[aria-invalid="true"] {
  border-color: #FCA5A5;
  background: #FEF2F2;
}

/* ===== Chip (tags / filters) ===== */
.pub-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: var(--pub-radius-pill);
  background: var(--pub-primary-soft);
  color: var(--pub-primary-dark);
  border: 1px solid #BAE6FD;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.pub-chip:hover { background: #BAE6FD; border-color: #7DD3FC; }
.pub-chip--active {
  background: var(--pub-primary);
  color: #fff;
  border-color: var(--pub-primary);
}

/* ===== Section header ===== */
.pub-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pub-section-title {
  font-family: var(--pub-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--pub-ink-900);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.pub-section-subtitle {
  color: var(--pub-ink-500);
  font-size: 1rem;
  margin-top: .35rem;
}

/* ===== Hero ===== */
.pub-hero {
  background:
    radial-gradient(at 80% 0%, rgba(255,255,255,.18) 0%, transparent 50%),
    radial-gradient(at 0% 100%, rgba(201,146,42,.18) 0%, transparent 55%),
    linear-gradient(135deg, #0284C7 0%, #0EA5E9 55%, #38BDF8 100%);
  color: #fff;
  border-radius: clamp(20px, 3vw, 28px);
  overflow: hidden;
  box-shadow: var(--pub-shadow-card-hover);
}

/* ===== Service card (home) ===== */
.pub-service-card {
  background: var(--pub-card-bg);
  border: 1px solid var(--pub-card-border);
  border-radius: var(--pub-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--pub-shadow-card);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.pub-service-card:hover {
  box-shadow: var(--pub-shadow-card-hover);
  transform: translateY(-2px);
  border-color: #7DD3FC;
}
@media (hover: none) {
  .pub-service-card:hover { transform: none; }
}
.pub-service-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--pub-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pub-primary-soft);
  color: var(--pub-primary-dark);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* ===== Empty state ===== */
.pub-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--pub-ink-500);
  background: var(--pub-card-bg);
  border: 1px dashed var(--pub-card-border);
  border-radius: var(--pub-radius-lg);
}
.pub-empty i { font-size: 2rem; color: #7DD3FC; margin-bottom: .5rem; display: block; }

/* ===== Card hover, retained class name from existing markup ===== */
.card-hover { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--pub-shadow-card-hover);
}
@media (hover: none) {
  .card-hover:hover { transform: none; box-shadow: none; }
}

/* ===== Mobile tweaks ===== */
@media (max-width: 640px) {
  .pub-card { border-radius: 14px; }
  .pub-btn { padding: .7rem 1rem; font-size: .95rem; }
}