/* findmytutor.im — "Parish Noticeboard" direction.
   Tutor listings read like postcards pinned to a community noticeboard:
   saturated heather-purple ground, gorse-yellow accent, warm paper-surface
   cards with a pin marker and a slight off-board rotation. Confident sans
   headlines (Space Grotesk), clean body (DM Sans) — avoids the cream-paper/
   bookish-serif default this category tends to land on. */

:root{
  --purple-900:#2b1d3a;
  --purple-800:#3e2c4f;
  --purple-700:#4f3a63;
  --gorse:#f2b705;
  --gorse-dark:#c98f00;
  --sea:#3b6e8f;
  --leaf:#3f6b4f;
  --paper:#faf6ec;
  --paper-dim:#efe8d8;
  --ink:#221a2c;
  --ink-soft:#564966;
  --cream:#f7f1e3;
  --danger:#b23a3a;
  /* From the mini page direction contract: hairlines, and the recessed fill
     the sheet is mounted on. Named here because the editor uses them too. */
  --edge:#e0d5bd;
  --paper-2:#f4eeda;
  --card:#fffdf6;
  --ink-faint:#726580;   /* 5.00:1 on paper, 4.65:1 on paper-2, AA on every ground */
  --margin-rule:#d98b8b;
  --radius:10px;
  --shadow-pin:0 6px 14px -4px rgba(43,29,58,.45), 0 2px 4px rgba(43,29,58,.25);
  --shadow-pin-hover:0 10px 22px -6px rgba(43,29,58,.5), 0 4px 8px rgba(43,29,58,.3);
  color-scheme: light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--purple-900);
  background-image:
    radial-gradient(circle at 20% 10%, var(--purple-700) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, var(--purple-700) 0%, transparent 40%);
  color:var(--cream);
  font-family:"Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
h1,h2,h3,.brand,button,.btn{font-family:"Archivo", "Karla", sans-serif}
a{color:var(--gorse);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px;width:100%}
main.wrap{flex:1;padding-top:28px;padding-bottom:56px}

/* ---------- site header ---------- */
.site-header{padding:22px 0 6px}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-size:1.5rem;font-weight:700;color:var(--cream);display:flex;align-items:center;gap:8px}
.brand::before{
  content:"";
  width:12px;height:12px;border-radius:50%;
  background:var(--gorse);
  box-shadow:0 0 0 3px rgba(242,183,5,.25);
}
.brand span{color:var(--gorse)}
.site-nav{display:flex;gap:18px;flex-wrap:wrap;font-size:.95rem}
.site-nav a{color:var(--cream);opacity:.9}
.site-nav a:hover{opacity:1}

/* ---------- hero / page intro ---------- */
.hero{padding:18px 0 36px}
.hero h1{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.1;margin:0 0 10px;max-width:20ch}
.hero .tag{color:var(--gorse);font-weight:600;font-size:1.05rem;margin:0 0 22px}
.hero .tag::before{content:"— "}

/* ---------- filter / search form (noticeboard "pin your request" strip) ---------- */
.board-strip{
  background:var(--purple-800);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:18px 20px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:30px;
}
.board-strip label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--cream);opacity:.85}
.board-strip label.checkbox{flex-direction:row;align-items:center;gap:6px;padding-bottom:9px}
.board-strip select,.board-strip input[type=text]{
  background:var(--paper);color:var(--ink);border:none;border-radius:6px;
  padding:9px 11px;font-size:.95rem;font-family:inherit;min-width:150px;
}
.board-strip .btn,.board-strip button[type=submit]{align-self:flex-end}
.board-strip button[type=submit]{padding:9px 22px}
.chipbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.chip{
  background:var(--purple-800);color:var(--cream);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:7px 16px;font-size:.88rem;font-weight:500;
}
.chip.is-active{background:var(--gorse);color:var(--purple-900);border-color:transparent;font-weight:700}

/* ---------- pinned cards (the core listing unit) ---------- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin:0 0 36px}
.pin-card{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
  padding:20px 18px 18px;
  box-shadow:var(--shadow-pin);
  transform:rotate(var(--tilt,-0.6deg));
  transition:transform .15s ease, box-shadow .15s ease;
}
.pin-card:nth-child(3n+1){--tilt:-1deg}
.pin-card:nth-child(3n+2){--tilt:0.8deg}
.pin-card:nth-child(3n){--tilt:-0.3deg}
.pin-card:hover{transform:rotate(0deg) translateY(-2px);box-shadow:var(--shadow-pin-hover)}
.pin-card::before{
  content:"";position:absolute;top:-7px;left:22px;width:14px;height:14px;border-radius:50%;
  background:var(--gorse);box-shadow:0 2px 3px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.5);
}
.pin-card.is-featured::before{background:var(--sea)}
.pin-card.is-featured{border:2px solid var(--gorse)}
.pin-card .badge{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--purple-900);background:var(--gorse);border-radius:4px;padding:2px 8px;margin-bottom:8px;
}
.pin-card h2,.pin-card h3{font-size:1.15rem;margin:0 0 4px}
.pin-card h2 a,.pin-card h3 a{color:var(--ink)}
.pin-card .meta{font-size:.85rem;color:var(--ink-soft);margin:0 0 10px}
.pin-card .rate{font-weight:700;color:var(--leaf)}
.pin-card label.shortlist-pick{
  display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-soft);margin-top:10px;
  border-top:1px dashed rgba(34,26,44,.15);padding-top:10px;
}

/* ---------- shortlist tray ---------- */
#shortlist-tray{
  background:var(--gorse);color:var(--purple-900);border-radius:8px;padding:10px 16px;
  font-size:.88rem;font-weight:600;margin:0 0 20px;min-height:0;
}
#shortlist-tray:empty{display:none}
#shortlist-tray a{color:var(--purple-900);text-decoration:underline}

/* ---------- listing detail page ---------- */
.listing-detail{background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow-pin);margin-bottom:28px}
.listing-detail h1{font-size:1.9rem;margin:0 0 6px;color:var(--ink)}
.listing-detail .meta{color:var(--ink-soft);margin:0 0 18px}
.listing-detail .bio{margin:0 0 18px}
.listing-detail .rate{font-size:1.2rem;font-weight:700;color:var(--leaf);margin:0 0 18px}
.contact-box{background:var(--cream);border-radius:8px;padding:20px;margin-top:10px}

/* ---------- forms (signup, login, contact, dashboard, shortlist) ---------- */
.form-card{
  background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:28px 26px;max-width:560px;box-shadow:var(--shadow-pin);margin:0 auto 30px;
}
.form-card h1{font-size:1.6rem;margin:0 0 6px;color:var(--ink)}
.form-card p.lede{color:var(--ink-soft);margin:0 0 20px}
.form-card form{display:flex;flex-direction:column;gap:14px}
.form-card label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:600}
.form-card label.checkbox{flex-direction:row;align-items:center;font-weight:500;gap:8px}
.form-card input[type=text],.form-card input[type=email],.form-card input[type=password],
.form-card input[type=number],.form-card select,.form-card textarea{
  font-family:inherit;font-size:1rem;padding:10px 12px;border:1px solid #ddd3b8;border-radius:6px;
  background:#fff;color:var(--ink);
}
.form-card textarea{min-height:100px;resize:vertical}
fieldset{border:1px solid #ddd3b8;border-radius:8px;padding:14px 16px;margin:0}
fieldset legend{font-weight:700;padding:0 6px}
fieldset .subject-group{margin-bottom:10px}
fieldset .subject-group strong{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:4px}
fieldset label{flex-direction:row;align-items:center;font-weight:400;gap:6px;display:inline-flex;margin:2px 10px 2px 0}

.btn,button[type=submit]{
  appearance:none;border:none;cursor:pointer;font-weight:700;font-size:1rem;
  background:var(--gorse);color:var(--purple-900);border-radius:999px;padding:12px 22px;
  transition:background .15s ease;align-self:flex-start;
}
.btn:hover,button[type=submit]:hover{background:var(--gorse-dark)}
.btn.secondary{background:transparent;color:var(--cream);border:1px solid var(--cream)}

p.error,p.success,p.notice{
  position:relative;
  background:#fff;
  padding:12px 16px 12px 34px;
  border:1px dashed rgba(34,26,44,.3);
  border-radius:3px;
  margin:0 0 16px;
  font-size:.92rem;
  font-weight:600;
}
p.error{color:var(--danger)}
p.success{color:var(--leaf)}
p.notice{color:var(--sea);font-weight:400}
p.notice strong{color:var(--ink);font-weight:700}
p.error::before,p.success::before,p.notice::before{
  content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;
}
p.error::before{background:var(--danger)}
p.notice::before{background:var(--sea)}
p.success::before{background:var(--leaf)}
p.disclaimer{font-size:.82rem;color:var(--cream);opacity:.65;max-width:640px;margin:10px 0 0}

/* ---------- admin (Operate mode: calm, scannable, no noticeboard flourish) ---------- */
.admin-shell{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-pin)}
.admin-shell h1{font-size:1.4rem;margin:0 0 18px;color:var(--ink)}
.admin-card{border:1px solid #e6ddc5;border-radius:8px;padding:16px 18px;margin-bottom:14px;background:#fff}
.admin-card h2{font-size:1.05rem;margin:0 0 6px}
.admin-card .actions{display:flex;gap:10px;margin-top:10px}
.admin-card .actions button{padding:8px 16px;font-size:.88rem;border-radius:6px}
.admin-card .actions button[value=approve]{background:var(--leaf);color:#fff}
.admin-card .actions button[value=reject]{background:var(--danger);color:#fff}

/* ---------- dashboard status ---------- */
.status-line{display:inline-flex;gap:10px;font-size:.85rem;color:var(--ink-soft);margin:0 0 18px}
.status-line strong{color:var(--ink)}

/* ---------- footer ---------- */
footer{
  text-align:center;padding:26px 0 34px;font-size:.82rem;color:var(--cream);opacity:.7;
}
footer a{color:var(--gorse)}

/* ---------- responsive ---------- */
@media (max-width:600px){
  .hero h1{font-size:1.6rem}
  .board{grid-template-columns:1fr}
  .board-strip{flex-direction:column;align-items:stretch}
  .board-strip select,.board-strip input[type=text]{min-width:0;width:100%}
  .form-card,.listing-detail,.admin-shell{padding:22px 18px}
  .site-header .wrap{flex-direction:column;align-items:flex-start}
}

/* --- mini page editor --------------------------------------------------- */
.form-card .hint{font-weight:400;font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.form-card fieldset{border:1px solid var(--edge);border-radius:3px;padding:14px;margin:0;
  display:flex;flex-direction:column;gap:10px}
.form-card legend{font-size:.9rem;font-weight:700;padding:0 6px}
.form-card .notice{background:#eef6ee;border-left:3px solid #4a7c4a;padding:9px 12px;
  border-radius:2px;margin:0 0 14px;font-size:.9rem}
.form-card .errors{background:#fbeeee;border-left:3px solid #a33;padding:9px 12px 9px 28px;
  border-radius:2px;margin:0 0 14px;font-size:.9rem}
.availability-edit{border-collapse:collapse;font-size:.85rem}
.availability-edit th{font-weight:600;color:var(--ink-soft);padding:4px 8px;text-align:left}
.availability-edit td{padding:2px;text-align:center}
.availability-edit .cell{display:block;padding:5px;cursor:pointer;border-radius:2px}
.availability-edit .cell:hover{background:var(--paper-2)}
.availability-edit input{margin:0}
.qa-pair{display:flex;flex-direction:column;gap:5px;padding-bottom:10px;
  border-bottom:1px dashed var(--edge)}
.qa-pair:last-child{border-bottom:0;padding-bottom:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:520px){
  .availability-edit{width:100%}
  .availability-edit th,.availability-edit td{padding:2px 3px}
  .availability-edit thead th{font-size:.7rem}
}
.photo-field .photo-current{display:block;border:1px solid var(--edge);padding:4px;
  background:var(--card);border-radius:2px;height:auto}
.photo-field input[type=file]{font-size:.85rem}