/* =========================================================
   DEAR TEACHER — scoped styles
   Every rule lives under .dt-scope so this plugin never
   touches the rest of your WordPress theme's styling.
   Colors come from --dt-accent / --dt-gold (set in Settings).
   ========================================================= */

.dt-scope{
  --dt-paper:#FAF7F1; --dt-paper-card:#F3EEE2; --dt-paper-deep:#EAE3D2;
  --dt-ink:#2B2622; --dt-ink-soft:#5B5148; --dt-ink-faint:#8A8072; --dt-line:#E1D9C7;
  --dt-red:#A6402B;
  --dt-font-display:'Fraunces',Georgia,serif;
  --dt-font-body:'Source Sans 3',-apple-system,sans-serif;
  --dt-font-hand:'Caveat',cursive;
  font-family:var(--dt-font-body);
  color:var(--dt-ink);
  line-height:1.6;
}
.dt-scope *,.dt-scope *::before,.dt-scope *::after{ box-sizing:border-box; }
.dt-scope img{ max-width:100%; }
.dt-scope h1,.dt-scope h2,.dt-scope h3{
  font-family:var(--dt-font-display); font-weight:600; margin:0 0 .5em; letter-spacing:-.01em; color:var(--dt-ink);
}
.dt-scope h1{ font-size:clamp(1.9rem,4.2vw,2.8rem); line-height:1.12; }
.dt-scope h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
.dt-scope p{ margin:0 0 1em; }
.dt-hand{ font-family:var(--dt-font-hand); }
.dt-eyebrow{ font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dt-accent); }
.dt-lede{ font-size:1.1rem; color:var(--dt-ink-soft); }
.dt-container{ max-width:1100px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .dt-container{ padding:0 16px; } }
.dt-container-wide{ max-width:1800px; margin:0 auto; padding:0 32px; }
@media (max-width:600px){ .dt-container-wide{ padding:0 16px; } }
.dt-section{ padding:40px 0; }

/* Buttons */
.dt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--dt-font-body); font-weight:600; font-size:.95rem;
  padding:12px 24px; border-radius:3px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; line-height:1;
}
.dt-btn-primary{ background:var(--dt-accent); color:var(--dt-paper); }
.dt-btn-secondary{ background:transparent; color:var(--dt-ink); border-color:var(--dt-ink); }
.dt-btn-ghost{ background:transparent; color:var(--dt-accent); border-color:var(--dt-line); }
.dt-btn-sm{ padding:8px 15px; font-size:.82rem; }
.dt-btn-block{ width:100%; }
.dt-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Hero */
.dt-hero{ padding:56px 20px; text-align:center; }
.dt-hero h1 em{ font-style:italic; color:var(--dt-accent); }
.dt-hero-sub{ max-width:540px; margin:14px auto 26px; font-size:1.08rem; color:var(--dt-ink-soft); }
.dt-hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.dt-hero-note{ margin-top:16px; font-size:.82rem; color:var(--dt-ink-faint); }

/* Stats */
.dt-stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--dt-line); border:1px solid var(--dt-line); border-radius:6px; overflow:hidden; }
.dt-stat-cell{ background:var(--dt-paper); padding:20px 14px; text-align:center; }
.dt-stat-num{ font-family:var(--dt-font-display); font-size:1.8rem; font-weight:700; color:var(--dt-accent); }
.dt-stat-label{ font-size:.75rem; color:var(--dt-ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
@media (max-width:640px){ .dt-stat-strip{ grid-template-columns:repeat(2,1fr); } }

/* Gallery cards */
.dt-gallery-grid{ display:grid; grid-template-columns:repeat(var(--dt-cols, 4), 1fr); gap:24px; align-items:stretch; }
@media (max-width:1400px){ .dt-gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:920px){ .dt-gallery-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:600px){ .dt-gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

.dt-letter-card{
  background:var(--dt-paper-card); border:1px solid var(--dt-line); border-radius:4px;
  padding:28px 26px 20px; box-shadow:0 1px 2px rgba(43,38,34,.06),0 6px 20px rgba(43,38,34,.06);
  position:relative; display:flex; flex-direction:column; gap:8px; min-height:270px; height:100%;
}
@media (max-width:600px){ .dt-letter-card{ padding:16px 14px 12px; min-height:210px; gap:6px; } }
.dt-letter-card::before{
  content:""; position:absolute; top:0; left:20px; right:20px; height:6px;
  background:repeating-linear-gradient(90deg, transparent, transparent 8px, var(--dt-paper-deep) 8px, var(--dt-paper-deep) 16px);
  border-radius:0 0 4px 4px;
}
@media (max-width:600px){ .dt-letter-card::before{ left:14px; right:14px; } }
.dt-letter-card.dt-featured{ border-color:var(--dt-gold); }
.dt-featured-tag{
  position:absolute; top:12px; right:12px; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--dt-gold); background:color-mix(in srgb, var(--dt-gold) 18%, white); padding:3px 8px; border-radius:20px;
}
.dt-letter-to{ font-family:var(--dt-font-display); font-size:1.15rem; font-weight:600; margin-top:4px; overflow-wrap:break-word; word-break:break-word; hyphens:none; }
@media (max-width:600px){ .dt-letter-to{ font-size:.98rem; } }
.dt-letter-excerpt{ color:var(--dt-ink-soft); font-size:.94rem; flex:1; overflow-wrap:break-word; word-break:break-word; hyphens:none; margin-bottom:0; }
.dt-letter-excerpt.dt-clamped{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.dt-letter-excerpt.dt-expanded{ display:block; -webkit-line-clamp:unset; overflow:visible; }
@media (max-width:600px){
  .dt-letter-excerpt{ font-size:.86rem; }
  .dt-letter-excerpt.dt-clamped{ -webkit-line-clamp:3; }
}
.dt-readmore-btn{ align-self:flex-start; margin-top:2px; font-size:.75rem !important; padding:3px 0 !important; background:none !important; border:none !important; color:var(--dt-accent) !important; text-decoration:underline; }
.dt-letter-meta{ font-size:.8rem; color:var(--dt-ink-faint); border-top:1px dashed var(--dt-line); padding-top:9px; }
@media (max-width:600px){ .dt-letter-meta{ font-size:.72rem; padding-top:7px; } }
.dt-letter-from{ font-weight:600; color:var(--dt-ink-soft); }

/* Forms */
.dt-form-card{ background:var(--dt-paper-card); border:1px solid var(--dt-line); border-radius:6px; padding:32px; box-shadow:0 1px 2px rgba(43,38,34,.06),0 6px 20px rgba(43,38,34,.06); }
.dt-field{ margin-bottom:18px; }
.dt-field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.dt-field .dt-hint{ font-size:.78rem; color:var(--dt-ink-faint); margin-top:5px; }
.dt-req{ color:var(--dt-red); }
.dt-field input[type=text],.dt-field input[type=email],.dt-field select,.dt-field textarea{
  width:100%; font-family:var(--dt-font-body); font-size:1rem; color:var(--dt-ink);
  background:var(--dt-paper); border:1px solid var(--dt-line); border-radius:4px; padding:11px 13px;
}
.dt-field textarea{ resize:vertical; min-height:130px; }
.dt-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .dt-field-row{ grid-template-columns:1fr; } }
.dt-char-count{ text-align:right; font-size:.78rem; color:var(--dt-ink-faint); }
.dt-consent-box{ display:flex; gap:10px; align-items:flex-start; background:var(--dt-paper-deep); padding:14px 16px; border-radius:6px; }
.dt-consent-box p{ margin:0; font-size:.86rem; color:var(--dt-ink-soft); }
.dt-honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }
.dt-alert{ padding:13px 16px; border-radius:6px; font-size:.9rem; margin-bottom:20px; }
.dt-alert-error{ background:#F7E4DF; color:var(--dt-red); border:1px solid #E9BEB1; }
.dt-alert-success{ background:color-mix(in srgb, var(--dt-accent) 12%, white); color:var(--dt-ink); border:1px solid var(--dt-line); }

/* Appreciation card */
.dt-card-stage{ display:flex; justify-content:center; padding:16px 0; }
.dt-card{
  width:520px; max-width:100%; min-height:560px; background:var(--dt-paper-card);
  border:1px solid var(--dt-line); position:relative; padding:44px 40px 60px;
  display:flex; flex-direction:column; font-family:var(--dt-font-body);
  box-shadow:0 1px 2px rgba(43,38,34,.06),0 6px 20px rgba(43,38,34,.06);
}
.dt-card .dt-cc-eyebrow{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--dt-accent); margin-bottom:18px; }
.dt-card .dt-cc-to{ font-family:var(--dt-font-display); font-size:1.7rem; font-weight:600; margin-bottom:14px; color:var(--dt-ink); overflow-wrap:break-word; word-break:break-word; hyphens:none; }
.dt-card .dt-cc-message{ font-size:1rem; line-height:1.6; flex:1; white-space:pre-wrap; color:var(--dt-ink); overflow-wrap:break-word; word-break:break-word; hyphens:none; }
.dt-card .dt-cc-from{ font-family:var(--dt-font-hand); font-size:1.4rem; color:var(--dt-gold); margin-top:16px; }
.dt-card .dt-cc-meta{ margin-top:12px; font-size:.76rem; color:var(--dt-ink-faint); border-top:1px dashed var(--dt-line); padding-top:10px; }
.dt-card .dt-cc-brand{ position:absolute; bottom:20px; right:40px; font-family:var(--dt-font-display); font-size:.8rem; color:var(--dt-ink-faint); }
.dt-card .dt-cc-mark{ position:absolute; top:38px; right:40px; width:30px; height:30px; }

/* Search / filter bar */
.dt-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; background:var(--dt-paper-deep); padding:16px; border-radius:6px; align-items:center; }
.dt-filter-bar input,.dt-filter-bar select{ padding:9px 11px; border:1px solid var(--dt-line); border-radius:4px; font-family:var(--dt-font-body); background:var(--dt-paper); }

.dt-pagination{ display:flex; gap:8px; justify-content:center; margin-top:28px; }
.dt-pagination a,.dt-pagination span{ padding:7px 13px; border:1px solid var(--dt-line); border-radius:4px; text-decoration:none; font-size:.88rem; color:var(--dt-ink-soft); }
.dt-pagination .dt-current{ background:var(--dt-accent); color:var(--dt-paper); border-color:var(--dt-accent); }

.dt-empty-state{ text-align:center; padding:48px 16px; color:var(--dt-ink-faint); }
.dt-empty-state h3{ color:var(--dt-ink-soft); font-family:var(--dt-font-display); }