/* Write With Janet — the crayon/dog theme for PARENT-FACING pages (gh #78).
 *
 * THIS FILE IS THE SINGLE SOURCE OF THE PARENT PALETTE AND TYPE.
 * Tokens below are the public site's set (docs/public-site/site/style.css),
 * brought in-app so register.writewithjanet.com and writewithjanet.com cannot
 * drift. Never redefine a colour or a font stack in a template: add a token
 * here and reference it with var(). A second :root block in a template is the
 * defect this file exists to prevent.
 *
 * Approved design: variant A of the dog-register prototype (Jamie, 2026-07-20).
 * The dog imagery is deliberately THIN and NEVER inside a form field group —
 * a crayon badge + tagline in the header, a hero banner above the H1, paw
 * dividers between the big moves of the form, and one puppy photo at the
 * submit moment. Staff/admin screens are out of scope and stay plain.
 *
 * Phone-first; the desktop overrides live at the bottom.
 */

:root {
  /* Crayon palette — verbatim from the public site. */
  --peach: #f4b183;
  --yellow: #f7e14b;
  --ink: #1c1c1c;
  --green: #4e9a44;
  --green-dark: #2f6b28;
  --pink: #f4a9bc;
  --cream: #f8f0dc;
  --paper: #fdfaf3;
  --text: #3a352d;
  --muted: #7a7264;
  --line: #e8e2d6;

  /* Type. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* Derived / semantic tokens. Parent templates reference THESE, never a hex. */
  --card: #ffffff;
  --field-bg: #fffdf8;
  /* Field outlines use --field-line, NOT the hairline --line used for dividers
     (Jamie, 2026-08-02: a hairline box was invisible at an angle, so the
     comments box read as if it weren't there). --field-line clears the 3:1
     non-text contrast bar an input boundary has to meet. Keep it this dark. */
  --field-line: #8c8371;
  --accent: var(--green-dark);
  --accent-bg: #eef6ec;
  --warn: #b5791b;
  --warn-bg: #fdf6e3;
  --warn-line: #ead9a8;
  --warn-ink: #6b4d10;
  --danger: #a33e52;
  --danger-bg: #fbe6ea;
  --highlight: #fdf3b8;
  --chip-bg: #f0ece1;
  /* Draft / not-yet-sent state on the public schedule. Deliberately outside the
     crayon hues so "provisional" reads as neutral rather than as a warning. */
  --draft-bg: #e8eaf3;
  --draft-line: #a3aecf;
  --draft-ink: #47507a;
  --track-off: #d8d2c4;
  --scrim: rgba(28, 28, 28, 0.45);
  --shadow: 0 2px 10px rgba(60, 40, 10, 0.06);
  --shadow-lift: 0 6px 20px rgba(60, 40, 10, 0.16);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  background: var(--paper);
  color: var(--text);
  line-height: 1.55;
}

a { color: var(--green-dark); }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 22px 0 8px;
}
p.lede, .subtitle { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

/* ---------- header: the crayon badge + the one tagline ---------- */
.wwj-head { background: var(--paper); border-bottom: 1px solid var(--line); }
/* Full-bleed on purpose: parent pages use three different content widths (the
   640px .wrap, the register form's 900px layout, the schedule's wide grid), so
   a centred header column would sit visibly off-axis on two of the three. */
.wwj-head .head-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px;
}
.wwj-head .brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.wwj-head .brand img { height: 34px; width: 34px; display: block; }
.wwj-head .brand b { font-family: var(--sans); font-size: 15px; font-weight: 700; display: block; line-height: 1.2; }
.wwj-head .brand .tag {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: var(--muted); line-height: 1.25;
}
/* Second header row: the parent nav sits with the badge, not in the content
   column, so every parent page (base-extending or standalone) has one chrome. */
.wwj-head .nav-in { padding: 0 16px; }
.wwj-head nav.parent-nav { border-bottom: 0; margin-bottom: 0; padding-bottom: 8px; }

/* ---------- hero: the dogs-couch banner above the H1 ---------- */
.wwj-hero { background: var(--cream); border-bottom: 1px solid var(--line); }
/* 900px matches the register form's .layout so the banner and the first card
   share one left edge. */
.wwj-hero .in { max-width: 900px; margin: 0 auto; padding: 18px 16px 22px; }
.hero-photo {
  display: block; width: 100%; height: 110px; object-fit: cover;
  object-position: 50% 62%; border-radius: 14px; margin-bottom: 16px;
  box-shadow: var(--shadow-lift);
}

/* ---------- paw divider between the big moves of the form ----------
   The paw is an inline data-URI SVG (four toes + a pad) in --peach, so there
   is no extra asset to ship and no second place for the colour to live. */
.paw-rule {
  border: 0; height: 26px; margin: 22px 0 16px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23f4b183'><ellipse cx='27' cy='38' rx='9.5' ry='13' transform='rotate(-18 27 38)'/><ellipse cx='45' cy='27' rx='9.5' ry='13.5' transform='rotate(-7 45 27)'/><ellipse cx='64' cy='30' rx='9.5' ry='13.5' transform='rotate(9 64 30)'/><ellipse cx='79' cy='44' rx='9' ry='12.5' transform='rotate(22 79 44)'/><path d='M52 46c14 0 24 10 24 21s-11 15-24 15-24-4-24-15 10-21 24-21z'/></g></svg>"),
    linear-gradient(to right, transparent, var(--line) 18%, var(--line) 82%, transparent);
  background-repeat: no-repeat, no-repeat;
  background-size: 22px 22px, 100% 2px;
  background-position: center center, center center;
}

/* ---------- the submit moment: one puppy, above the buttons ---------- */
.submit-card {
  background: var(--cream); border: 1px solid #e5d9b4; border-radius: 18px;
  padding: 18px; margin-top: 16px;
}
.submit-dog { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.submit-dog img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 3px solid var(--card); box-shadow: 0 3px 10px rgba(60, 40, 10, 0.18);
}
.submit-dog p { margin: 0; font-size: 15px; font-style: italic; color: var(--muted); }

/* ---------- parent chrome (was inline in parent_base.html) ---------- */
.wrap { max-width: 640px; margin: 0 auto; padding: 16px 16px 24px; }
body.has-tabbar .wrap { padding-bottom: 84px; }

/* Parent nav (#34 item 13): logged-in parents get the full menu; anonymous
   visitors (public schedule, token-gated proposal pages) see Register +
   Schedule only. Phone-first: one wrapping row of plain links. */
nav.parent-nav {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--sans); font-size: 14px;
  padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
nav.parent-nav a { text-decoration: none; font-weight: 600; color: var(--green-dark); }
nav.parent-nav a:hover { text-decoration: underline; }
nav.parent-nav a.profile { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
nav.parent-nav a.profile svg { width: 20px; height: 20px; display: block; }
/* When Profile is present it owns the margin-left:auto push; Log out then
   sits directly after it rather than claiming its own auto-margin. */
nav.parent-nav a.profile + a.logout { margin-left: 0; }
nav.parent-nav a.logout { margin-left: auto; font-weight: 400; color: var(--muted); }

/* Django messages (#34 item 17, parent side): rendered at the very top of
   the content column so they're visible on load without scrolling. */
ul.messages { list-style: none; padding: 0; margin: 0 0 16px; font-family: var(--sans); }
ul.messages li {
  background: var(--accent-bg); border: 1px solid #a9dcb8;
  padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; font-size: 14px;
}
ul.messages li.warning { background: var(--warn-bg); border-color: var(--warn-line); }
ul.messages li.error { background: var(--danger-bg); border-color: var(--pink); }

/* Bottom icon tab bar (#35): parent-portal chrome once logged in, on every
   parent page — Home / Charges & Payments / Schedule / Register. */
nav.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--card); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); z-index: 40;
  font-family: var(--sans);
}
nav.tabbar .tab {
  text-align: center; padding: 10px 2px 12px; font-size: 11px;
  text-decoration: none; color: var(--muted);
}
nav.tabbar .tab.on { color: var(--green-dark); font-weight: 700; }
nav.tabbar .tab .ic { display: block; font-size: 16px; }

/* ---------- shared parent surfaces ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.card > h2:first-child { margin-top: 0; }

label { display: block; font-family: var(--sans); font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.field { margin-bottom: 14px; }
.field-hint, .hint { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 2px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--field-line);
  border-radius: 10px; font-size: 16px; font-family: var(--sans);
  background: var(--field-bg); color: var(--text);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(78, 154, 68, 0.18);
}
textarea { min-height: 70px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }

button.primary, .btn {
  background: var(--green); color: var(--card); border: none;
  padding: 11px 22px; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button.primary:hover, .btn:hover { background: var(--green-dark); }
button.secondary, .btn.ghost {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  padding: 11px 22px; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button.secondary:hover, .btn.ghost:hover { background: var(--cream); border-color: var(--peach); }

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  .wwj-head .head-in, .wwj-head .nav-in, .wwj-hero .in { padding-left: 24px; padding-right: 24px; }
  .wwj-hero .in { padding-top: 28px; padding-bottom: 30px; }
  .hero-photo { height: 180px; }
  .submit-dog img { width: 78px; height: 78px; }
}