/* Mike Carsey Dog Walking: shared components.
   Used by the site (../styles.css adds page layout on top) and by the style guide.
   Every value comes from tokens.css; tweak tokens.json, not this file, for colours and sizes. */

/* ---------- text, rules, frame, paws ---------- */
.eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide-caps); text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: var(--space-3);
}
.eyebrow--on-dark { color: var(--color-on-inverse); opacity: 0.92; }
.section-title { font-size: var(--text-2xl); color: var(--color-ink); }

.ruled-heading {
  display: flex; align-items: center; gap: var(--space-4);
  font-size: var(--text-lg); letter-spacing: var(--tracking-wide-caps); text-transform: uppercase;
  color: var(--color-ink); margin-bottom: var(--space-5);
}
.ruled-heading::before, .ruled-heading::after {
  content: ""; flex: 1 1 0; height: var(--border-rule); background: var(--border-rule-color);
}
.ruled-heading span { flex: none; }

/* The double-rule frame from the business card and flyer. */
.frame {
  position: relative;
  border: var(--border-frame-outer) solid var(--border-frame-color);
  padding: calc(var(--border-frame-gap) + var(--border-frame-inner) + var(--space-5));
  background: var(--color-bg);
}
.frame::before {
  content: ""; position: absolute; pointer-events: none;
  inset: var(--border-frame-gap);
  border: var(--border-frame-inner) solid var(--border-frame-color);
}
.frame--paper { background: var(--color-surface); }

.paw { width: 1.35em; height: 1.35em; fill: var(--color-paw); flex: none; }
.paw--lg { width: 2.75rem; height: 2.75rem; }
.paw-list { list-style: none; margin: 0; padding: 0; }
.paw-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.paw-list .paw { margin-top: 0.15em; }

.photo-frame { margin: 0; position: relative; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }

[data-placeholder] { }
.show-placeholders [data-placeholder] { outline: 1.5px dashed var(--color-accent); outline-offset: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--button-height); padding: 0 var(--button-padding-x);
  font-family: var(--font-body); font-size: var(--button-font-size); font-weight: var(--button-font-weight);
  letter-spacing: var(--button-tracking); line-height: 1.1; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--button-radius); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.btn--primary:hover { background: var(--button-primary-bg-hover); }
.btn--inverse { background: var(--button-inverse-bg); color: var(--button-inverse-fg); }
.btn--inverse:hover { background: var(--button-inverse-bg-hover); }
.btn--secondary { background: transparent; color: var(--button-secondary-fg); border-color: var(--button-secondary-border); }
.btn--secondary:hover { background: var(--button-secondary-bg-hover); }
.btn--ghost {
  background: transparent; color: var(--button-ghost-fg); padding-inline: 0; min-height: var(--size-tap-min);
  text-decoration: underline; text-decoration-color: var(--button-ghost-underline); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.btn--ghost:hover { text-decoration-color: var(--button-ghost-fg); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: var(--button-disabled-opacity); cursor: not-allowed; }
.btn--lg { min-height: calc(var(--button-height) + 0.5rem); font-size: var(--text-md); padding-inline: calc(var(--button-padding-x) + 0.5rem); }
.btn--block { width: 100%; }

/* ---------- form controls ---------- */
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; min-height: var(--input-height); padding: 0.6rem var(--input-padding-x);
  font: inherit; font-size: max(16px, var(--input-font-size)); color: var(--input-fg);
  background: var(--input-bg); border: var(--input-border-width) solid var(--input-border); border-radius: var(--input-radius);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
textarea { min-height: 7.5rem; resize: vertical; line-height: var(--leading-normal); }
select {
  appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--palette-ink) 50%), linear-gradient(135deg, var(--palette-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
  background-size: 0.35rem 0.35rem; background-repeat: no-repeat;
}
::placeholder { color: var(--input-placeholder); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--input-border-focus);
  box-shadow: 0 0 0 var(--input-ring-width) var(--input-ring);
}
[aria-invalid="true"] {
  border-color: var(--input-border-error) !important; background-color: var(--color-error-bg);
  box-shadow: inset 4px 0 0 var(--input-border-error);
}
.is-valid { border-color: var(--input-border-success); box-shadow: inset 4px 0 0 var(--input-border-success); }
.field__error {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin-top: var(--space-2); color: var(--color-error); font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.field__error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--color-error); color: var(--palette-white); font-size: 0.75rem; margin-top: 0.1em; }
.field__error[hidden] { display: none; }

.chips { border: 0; padding: 0; margin: 0 0 var(--space-4); min-inline-size: 0; }
.chips__legend { padding: 0; }
.chips__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-grid; place-items: center; min-width: 3.4rem; min-height: var(--size-tap-min); padding: 0 var(--space-3);
  border: var(--input-border-width) solid var(--input-border); border-radius: var(--radius-pill);
  background: var(--input-bg); font-weight: var(--weight-semibold); font-size: var(--text-xs); letter-spacing: 0.04em;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.chip input:checked + span { background: var(--color-surface-inverse); color: var(--color-on-inverse); border-color: var(--color-surface-inverse); }
.chip input:focus-visible + span { box-shadow: 0 0 0 var(--input-ring-width) var(--input-ring); }

/* ---------- card ---------- */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  padding: var(--card-padding); box-shadow: var(--card-shadow);
}
.card__title { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-md); margin-bottom: var(--space-2); }
.card p { color: var(--color-muted); }

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-border);
  padding: var(--badge-padding-y) var(--badge-padding-x); border-radius: var(--radius-pill);
  font-size: var(--badge-font-size); font-weight: var(--weight-semibold); letter-spacing: var(--badge-tracking); text-transform: uppercase;
}

/* ---------- paw divider ---------- */
.paw-divider { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-6); }
.paw-divider::before, .paw-divider::after { content: ""; flex: 1; height: var(--border-hairline); background: var(--border-rule-color); }
.paw-divider .paw { width: 1.5rem; height: 1.5rem; }