@import './hbcl-tokens.css';

/* Hummingbird Care Link — base stylesheet (no framework, v1) */

:root {
  --hbcl-teal-50:  #f3f0fb;
  --hbcl-teal-100: #e0d8f5;
  --hbcl-teal-500: var(--hbcl-purple);
  --hbcl-teal-600: var(--hbcl-purple-dark);
  --hbcl-teal-700: var(--hbcl-purple-dark);
  --hbcl-sand-50:  #faf6ef;
  --hbcl-sand-200: #ece3d0;
  --hbcl-ink:      #1a0f2e;
  --hbcl-ink-60:   #6952BA;
  --hbcl-bg:       #FFFFFF;
  --hbcl-border:   rgba(84, 61, 147, 0.15);
  --hbcl-danger:   #a4262c;
  --hbcl-ok:       #1b6b3a;
  --hbcl-radius:   10px;
  --hbcl-shadow:   0 2px 12px rgba(84, 61, 147, 0.10);
  --hbcl-font:     var(--hbcl-font-body, "Roboto", sans-serif);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--hbcl-lavender); color: var(--hbcl-text, #1a0f2e); font-family: var(--hbcl-font-body, "Roboto", sans-serif); line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--hbcl-purple); text-decoration: none; }
a:hover, a:focus { color: var(--hbcl-rose); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--hbcl-purple);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--hbcl-font-display, "Marcellus", serif);
  color: var(--hbcl-purple);
}

.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 0; }

/* Main wrapper — clear the sticky site-header on every public page.
   Header height: mobile ~76px, desktop ~121px. 5rem (80px) covers mobile
   safely; per design spec criterion #5 (padding-top >= 5rem). */
main#main.container {
  padding-top: 5rem;
}
@media (min-width: 769px) {
  main#main.container {
    padding-top: 6rem;
  }
}

/* Form inputs — explicit 16px floor to prevent iOS focus zoom on the
   public login / register / contact / browse / hero forms. style.css used
   to inherit `font: inherit` which works only if body font-size === 16px. */
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=tel],
input[type=url],
input[type=number],
select,
textarea {
  font-size: 16px;
  min-height: 44px;
  width: 100%;
  max-width: 100%;
}
textarea { min-height: 120px; }
.btn { min-height: 44px; }

/* Stack .form-row on mobile so multi-input rows don't squeeze below
   reasonable widths at 320px (hero search, providers search). */
.form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-row > * { flex: 1 1 100%; min-width: 0; }
@media (min-width: 481px) {
  .form-row > * { flex: 1 1 auto; }
  .form-row > .btn { flex: 0 0 auto; }
}

/* Provider grid — guarantee single-column stack at 320–479px even if
   the auto-fill minmax(280px) drops to one column anyway. Reinforces
   touch targets on the clickable card link. */
.provider-grid .provider-card {
  display: block;
  min-height: 44px;
}
@media (max-width: 479px) {
  .grid.provider-grid {
    grid-template-columns: 1fr;
  }
}

/* Header / nav — layout handled by hbcl-site-chrome.css */
.nav-badge { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hbcl-rose); color: var(--hbcl-white); font-size: 0.7rem; font-weight: 700; text-align: center; pointer-events: none; }

/* Hero */
.hero { background: var(--hbcl-grad-dark); padding: 3rem 0; text-align: center; color: var(--hbcl-white); }
.hero h1 { font-size: 2rem; margin: 0 0 0.5rem; color: var(--hbcl-white); font-family: var(--hbcl-font-display, "Marcellus", serif); }
.hero p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 1.5rem; }

/* Forms */
.form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], select, textarea {
  padding: 0.55rem 0.75rem; border: 1px solid var(--hbcl-border); border-radius: var(--hbcl-radius);
  font: inherit; background: var(--hbcl-white); color: var(--hbcl-ink); min-width: 0;
}
textarea { min-height: 120px; resize: vertical; }
.btn {
  display: inline-block; padding: 0.6rem 1.5rem; border-radius: var(--hbcl-radius-btn, 40px);
  background: var(--hbcl-grad-primary, linear-gradient(232deg, #543D93 0%, #ED70A3 100%));
  color: var(--hbcl-white); border: 0; cursor: pointer;
  font-family: var(--hbcl-font-display, "Marcellus", serif);
  font-weight: 700; font-size: inherit;
  box-shadow: var(--hbcl-shadow-btn, 0 4px 16px rgba(84, 61, 147, 0.25));
}
.btn:hover, .btn:focus {
  background: var(--hbcl-grad-soft);
  text-decoration: none; color: var(--hbcl-white);
}
.btn.secondary { background: var(--hbcl-white); color: var(--hbcl-purple); border: 2px solid var(--hbcl-purple); box-shadow: none; }
.btn.secondary:hover { background: var(--hbcl-lavender); }
.btn.danger    { background: var(--hbcl-danger); box-shadow: none; }
.btn:disabled  { opacity: 0.5; cursor: not-allowed; }

/* Cards / grids */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: var(--hbcl-card); border: 1px solid var(--hbcl-border); border-radius: var(--hbcl-radius-card, 16px);
  padding: 1rem; box-shadow: var(--hbcl-shadow-card, 0 2px 12px rgba(84, 61, 147, 0.10));
}
.card h3 { margin: 0 0 0.25rem; color: var(--hbcl-purple); font-family: var(--hbcl-font-display, "Marcellus", serif); font-size: 1.1rem; }
.card .meta { font-size: 0.85rem; color: var(--hbcl-text-muted); margin-bottom: 0.5rem; }
.card .price { font-weight: 600; color: var(--hbcl-purple); }

/* Engagement list + status badges */
.status-badge {
  display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  background: var(--hbcl-sand-200); color: var(--hbcl-ink);
}
.status-badge.inquiry            { background: var(--hbcl-inquiry-bg, #fce9c2); color: var(--hbcl-inquiry-text, #6b4a00); }
.status-badge.provider_responded { background: var(--hbcl-teal-100); color: var(--hbcl-purple); }
.status-badge.client_confirmed   { background: var(--hbcl-teal-100); color: var(--hbcl-purple); }
.status-badge.scheduled          { background: var(--hbcl-scheduled-bg, #c2e0fc); color: var(--hbcl-scheduled-text, #0a3a6b); }
.status-badge.in_progress        { background: var(--hbcl-ok-bg); color: var(--hbcl-ok); }
.status-badge.completed          { background: var(--hbcl-ok-bg); color: var(--hbcl-ok); }
.status-badge.cancelled_by_client,
.status-badge.cancelled_by_provider { background: var(--hbcl-danger-bg); color: var(--hbcl-danger); }

/* Message thread */
.thread { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.bubble {
  padding: 0.6rem 0.9rem; border-radius: var(--hbcl-radius); max-width: 72ch;
  background: var(--hbcl-sand-50); border: 1px solid var(--hbcl-border);
}
.bubble.mine { align-self: flex-end; background: var(--hbcl-teal-50); border-color: var(--hbcl-teal-100); }
.bubble .who { font-size: 0.75rem; color: var(--hbcl-text-muted); margin-bottom: 0.15rem; }
.bubble--admin { border-left: 4px solid var(--hbcl-admin-accent, #8a5cff); background: var(--hbcl-admin-bg, #f4efff); padding: 0.5rem 0.75rem; margin: 0.5rem 0; border-radius: 6px; }
.bubble .body { white-space: pre-wrap; word-wrap: break-word; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip-to-main-content link — visible on keyboard focus only */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hbcl-purple);
  color: var(--hbcl-white);
  padding: 0.6rem 1rem;
  z-index: 10000;
  text-decoration: none;
  border-radius: 0 0 var(--hbcl-radius) 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--hbcl-rose);
  outline-offset: 2px;
}

/* Respect prefers-reduced-motion for tooltip transitions. */
@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::before,
  [data-tooltip]::after {
    transition: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* Page description banner */
.hbcl-page-desc {
  background: var(--hbcl-teal-50);
  border: 1px solid var(--hbcl-teal-100);
  border-radius: var(--hbcl-radius);
  padding: 0.75rem 1rem 0.75rem 2.25rem;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.95rem;
  color: var(--hbcl-ink);
  line-height: 1.55;
  position: relative;
}
.hbcl-page-desc::before {
  content: "\2139";
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--hbcl-purple);
}

/* Tooltips — pure CSS with data-tooltip */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease-in-out;
  z-index: 1000;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--hbcl-ink);
  color: var(--hbcl-white);
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  max-width: 250px;
  width: max-content;
  text-align: center;
  white-space: normal;
  font-weight: 400;
}
[data-tooltip]::after {
  content: "";
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--hbcl-ink);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after,
[data-tooltip].tooltip-active::before,
[data-tooltip].tooltip-active::after {
  opacity: 1;
}
/* Bottom variant */
[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 8px);
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--hbcl-ink);
}

/* Help icon (inline ?) */
.hbcl-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid var(--hbcl-border);
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--hbcl-text-muted);
  vertical-align: middle;
  margin-left: 0.25rem;
  cursor: help;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 600px) {
  .hero { padding: 2rem 0; }
  .hero h1 { font-size: 1.5rem; }
}

/* Reviews & ratings (Wave 7) */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  line-height: 1;
}
.stars .star-glyphs {
  color: var(--hbcl-star, #f5a623);
  letter-spacing: 0.05em;
}
.stars .stars-label {
  color: var(--hbcl-text-muted, #6952BA);
  font-size: 0.85rem;
}
.stars.empty { font-size: 0.85rem; }

.review-item h4 { margin: 0 0 0.25rem; font-size: 1rem; }
.review-list { margin-top: 0.5rem; }

.rating-input input[type="radio"] { margin-right: 0.25rem; }