/* Karmik Architect portal.
 *
 * Light, quiet and readable. The subject matter is somebody's marriage or
 * their health, and a directory that looks like a marketplace reads as one.
 */

:root {
  --bg: #fbf9f6;
  --card: #ffffff;
  --fg: #221d18;
  --muted: #6f665d;
  --line: #e6dfd6;
  --primary: #b4531f;
  --on-primary: #fff;
  --ok: #2f6f4a;
  --bad: #a3302a;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 ui-serif, Georgia, "Times New Roman", serif;
}

a { color: var(--primary); }
h1, h2, h3 { font-weight: 600; line-height: 1.25; }
h1 { font-size: 30px; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 24px 0 8px; }
h3 { font-size: 18px; margin: 0 0 4px; }

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.brand { font-size: 19px; font-weight: 600; text-decoration: none; color: var(--fg); }
.top nav { display: flex; gap: 18px; }
.top nav a { text-decoration: none; font-size: 15px; }
.top nav a:hover { text-decoration: underline; }

main { max-width: 880px; margin: 0 auto; padding: 28px 24px 60px; }

.hero { margin-bottom: 24px; }
.hero p { color: var(--muted); max-width: 60ch; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--primary); }

.practitioner { display: flex; gap: 14px; align-items: flex-start; }
.photo {
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 50%; object-fit: cover;
  background: var(--line);
}
.photo.big { width: 132px; height: 132px; flex-basis: 132px; }

.profile { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; }
.profile-main { flex: 1 1 340px; }

.years, .specs { margin: 2px 0; }
.specs { color: var(--fg); }
.langs, .when, .muted { color: var(--muted); }
.small { font-size: 13px; }
.count { color: var(--muted); margin: 8px 0 14px; }

.price { font-size: 20px; margin: 12px 0 4px; }
.rating { margin: 4px 0; }

.badge {
  display: inline-block;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef4ef;
  color: var(--ok);
  border: 1px solid #cfe2d5;
  margin: 4px 0;
}

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.filters input, .filters select {
  font: inherit; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: inherit;
}
.filters input { flex: 1 1 220px; }

button {
  font: inherit; cursor: pointer;
  padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: inherit;
}
button.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

blockquote { margin: 0 0 14px; padding-left: 14px; border-left: 3px solid var(--line); }
blockquote p { margin: 0 0 4px; }
cite { font-style: normal; font-size: 13px; color: var(--muted); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 14px 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; }

.verdict h1 { margin-bottom: 4px; }
.verdict.ok h1 { color: var(--ok); }
.verdict.bad h1 { color: var(--bad); }
.statement { font-size: 17px; }

.case h2 { margin-top: 22px; }
.case ul { margin: 6px 0; padding-left: 20px; }

/* The whole mitigation for the word "astrotherapist", so it is legible rather
   than fine print. It appears in the footer of every page and again inline on
   any page that names a practitioner. */
.disclaimer {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 70ch;
}
.disclaimer.inline {
  margin-top: 22px;
  padding: 12px 14px;
  border-left: 3px solid var(--line);
  background: #f4efe8;
  border-radius: 0 8px 8px 0;
}

footer {
  border-top: 1px solid var(--line);
  padding: 22px 24px 40px;
  background: var(--card);
}
footer p { max-width: 880px; margin: 0 auto 8px; }

@media (max-width: 560px) {
  h1 { font-size: 25px; }
  .photo.big { width: 96px; height: 96px; flex-basis: 96px; }
}

/* --- booking ------------------------------------------------------------ */

a.button {
  display: inline-block;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
a.button.primary {
  background: var(--primary); color: var(--on-primary);
  border-color: var(--primary);
}

.day { margin-bottom: 16px; }
.day h3 { font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.day .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.day .chips button {
  padding: 7px 14px; border-radius: 999px; font-size: 15px;
}
.day .chips button.on {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.chosen { font-size: 17px; }

/* Consent is a decision, not fine print, so it gets room to be read. */
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcfa;
  cursor: pointer;
}
.consent input { margin-top: 4px; flex: 0 0 auto; }
.consent span { font-size: 14px; line-height: 1.55; }

.linkish {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--primary); cursor: pointer; text-decoration: underline;
}
.error.card { border-color: var(--bad); color: var(--bad); }
.actions { margin-top: 18px; }

/* Labelled fields. Defined here rather than inherited: the console has its own
   stylesheet with a `.field` rule, and relying on that meant the booking form's
   labels and inputs ran together on one line the moment this page was built. */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.field > span { font-size: 13px; color: var(--muted); }
.field input, .field select {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  width: 100%;
}
.field input:focus, .filters input:focus, .field select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
form h3 { margin-top: 22px; }

/* Two fields side by side where there is room. Also only defined in the
   console's stylesheet until now, which is why name and email stacked. */
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- birth place search ------------------------------------------------- */

.place { margin-bottom: 4px; }

/* The results sit directly under the search box rather than floating over it.
   A dropdown that covers the next field is fine with a mouse and miserable on
   a phone, where the thing it covers is what you were about to fill in. */
.results { display: flex; flex-direction: column; gap: 0; margin: 6px 0 4px; }
.results:not(:empty) {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
}
.results .result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: none;
}
.results .result:last-child { border-bottom: none; }
.results .result:hover, .results .result:focus-visible {
  background: #f4efe8;
}
.results .result span { font-size: 13px; }
.results p { margin: 8px 12px; }

/* Date and time inputs are inputs, but Safari and Chrome each give them their
   own intrinsic width, which leaves two fields in a row that do not line up
   with any other row on the form. */
.field input[type="date"], .field input[type="time"] { width: 100%; }

/* --- payment keys ------------------------------------------------------- */

.keys { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.keyrow {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
/* The one taking money is marked on the row itself, not only by the absence
   of a button on it. Which account a client is about to pay is not something
   to work out by elimination. */
.keyrow.on { border-color: var(--ok); background: #f5faf6; }
.keyrow p { margin: 0; }
.keyrow .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: 14px; word-break: break-all; }
.keyrow-actions { display: flex; gap: 10px; align-items: center; }

input[type="file"] {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  width: 100%;
  margin-bottom: 6px;
}
.error.small { color: var(--bad); }

/* --- the birth-place map ------------------------------------------------ */

/* Zero height until it is used. Leaflet measures its container on creation,
   so the class goes on BEFORE the map is built, not after. */
.map { height: 0; transition: height .15s ease; }
.map.on {
  height: 260px;
  margin: 10px 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  z-index: 0;                 /* keep tiles under the page, not over it */
}
.leaflet-container { font: inherit; background: #eee; }
.leaflet-container a { color: var(--primary); }

/* The marker, drawn rather than fetched, so the page requests no image files
   and the pin is the same colour as everything else on the site.

   `.pin` is Leaflet's own wrapper for a divIcon; it needs no box of its own,
   only to not inherit the default icon's background. */
.pin { background: none; border: none; }
.pin-dot {
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  cursor: grab;
}
.pin-dot:active { cursor: grabbing; }

@media (max-width: 560px) {
  .map.on { height: 210px; }
}