/*
 * Your First 40 Days. Everything is scoped under .dt40 so it sits inside DT's theme without
 * touching it. Colours, font and button shapes follow the live disciplestoday.org theme:
 * Comfortaa throughout, red-orange (#ff3d17) pill buttons, orange (#f5722a) accents and lines
 * of #e0e0e6. Content pages there sit on a light grey band, so surfaces are white cards with
 * a border rather than grey tints, which would disappear.
 */
.dt40 {
  --dt40-accent: #ff3d17;
  --dt40-accent-hover: #e52d10;
  --dt40-orange: #f5722a;
  --dt40-accent-text: #c62d0f;
  --dt40-ink: #3a3a3a;
  --dt40-muted: #6b6d72;
  --dt40-line: #e0e0e6;
  --dt40-field: #b9b9c4;
  --dt40-surface: #fefefe;
  --dt40-tint: #f3f3f6;
  --dt40-warm: #fff3ec;
  --dt40-warm-line: #f6d3c0;
  --dt40-ok: #2b7a4e;
  --dt40-ok-soft: #e2f2e8;
  --dt40-warn: #8a560b;
  --dt40-warn-soft: #faecd6;
  --dt40-stop: #9c3131;
  --dt40-font: "Comfortaa", "Outfit", ui-rounded, "Segoe UI", system-ui, sans-serif;

  max-width: 680px;
  margin: 0 auto;
  color: var(--dt40-ink);
  font-family: var(--dt40-font);
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dt40 *, .dt40 *::before, .dt40 *::after { box-sizing: border-box; }
/* DT's header sticks to the top (66px on phones, 76px wide), so jump links stop below it. */
.dt40[id], .dt40 [id] { scroll-margin-top: 96px; }
.dt40 a { color: var(--dt40-accent-text); }
.dt40 [hidden] { display: none !important; }
.dt40 :focus-visible { outline: 2px solid var(--dt40-orange); outline-offset: 2px; }

.dt40-h2 { font-family: var(--dt40-font); font-weight: 700; font-size: clamp(22px, 4vw, 26px); line-height: 1.25; color: var(--dt40-ink); }
.dt40-h3 { font-family: var(--dt40-font); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--dt40-ink); }
.dt40-muted { color: var(--dt40-muted); }
.dt40-fine { font-size: 14px; color: var(--dt40-muted); }
.dt40-hint { font-size: 14px; color: var(--dt40-muted); display: block; }
.dt40-flabel { font-weight: 700; font-size: 15px; }
.dt40-center { text-align: center; align-items: center; }
.dt40-center > * { max-width: 100%; }
.dt40-left { text-align: left; align-self: stretch; }
.dt40-crumb { font-size: 14px; color: var(--dt40-muted); }
.dt40-crumb a { text-decoration: none; }
.dt40-daychip { align-self: flex-start; font-size: 13px; font-weight: 700; background: var(--dt40-surface); border: 1px solid var(--dt40-line); padding: 3px 12px; border-radius: 999px; }
.dt40-center .dt40-daychip { align-self: center; }
.dt40-eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dt40-accent-text); font-weight: 700; }

/* Cards, notices, pills */
.dt40-card { border: 1px solid var(--dt40-line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--dt40-surface); }
.dt40-card--tint { background: var(--dt40-warm); border-color: var(--dt40-warm-line); }
.dt40-card .dt40-card--tint { background: var(--dt40-tint); border-color: transparent; }
.dt40-notice { border-radius: 14px; padding: 12px 16px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.dt40-notice--ok { background: var(--dt40-ok-soft); color: #1f5c3a; }
.dt40-notice--warn { background: var(--dt40-warn-soft); color: #6b4208; }
.dt40-pill { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; background: var(--dt40-tint); color: var(--dt40-muted); }
.dt40-pill--ok { background: var(--dt40-ok-soft); color: var(--dt40-ok); }
.dt40-pill--warn { background: var(--dt40-warn-soft); color: var(--dt40-warn); }
.dt40-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; flex-wrap: wrap; }
.dt40-kv > span:first-child { color: var(--dt40-muted); }

/* Buttons, shaped like DT's own ("Donate Now", "Submit Content"). Themes style bare <button>s
   with strong selectors, so the look here is !important. */
.dt40 .dt40-btn { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--dt40-accent) !important; border-radius: 32px !important; padding: 13px 22px !important; font: 700 16px/1.2 var(--dt40-font) !important; background: var(--dt40-accent) !important; color: #fefefe !important; text-align: center; text-decoration: none !important; cursor: pointer; transition: background .15s; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
.dt40 .dt40-btn:hover { background: var(--dt40-accent-hover) !important; border-color: var(--dt40-accent-hover) !important; }
.dt40 .dt40-btn--ghost { background: transparent !important; color: var(--dt40-ink) !important; border-color: var(--dt40-orange) !important; }
.dt40 .dt40-btn--ghost:hover { background: var(--dt40-warm) !important; border-color: var(--dt40-orange) !important; }
.dt40 .dt40-btn--danger { background: var(--dt40-stop) !important; border-color: var(--dt40-stop) !important; }
.dt40 .dt40-btn--danger:hover { background: #812626 !important; }
.dt40 .dt40-btn--small { width: auto; padding: 8px 18px !important; font-size: 14px !important; }
.dt40-center .dt40-btn { max-width: 420px; }
.dt40 .dt40-linkish { background: none !important; border: 0 !important; padding: 0 !important; font: inherit; font-weight: 700; color: var(--dt40-accent-text) !important; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; box-shadow: none !important; }
.dt40-danger { color: var(--dt40-stop); }

/* Forms */
.dt40-form { display: flex; flex-direction: column; gap: 16px; }
.dt40-form .dt40-btn--ghost { align-self: flex-start; width: auto; min-width: 140px; }
.dt40-field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; min-width: 0; }
.dt40-field > label, .dt40-field > legend { font-size: 15px; font-weight: 700; padding: 0; }
/* Themes style form fields with strong selectors too, hence !important on the look. Single-line
   fields are pills like DT's own search and newsletter boxes. */
.dt40 input[type="text"], .dt40 input[type="email"], .dt40 input[type="time"], .dt40 input[type="number"], .dt40 select, .dt40 textarea {
  width: 100%; border: 1px solid var(--dt40-field) !important; border-radius: 32px !important; padding: 11px 18px !important; font: 16px/1.4 var(--dt40-font) !important; color: var(--dt40-ink) !important; background-color: var(--dt40-surface) !important; margin: 0 !important; min-height: 46px; box-shadow: none !important;
}
.dt40 textarea { border-radius: 18px !important; padding: 12px 16px !important; }
.dt40 input:focus, .dt40 select:focus, .dt40 textarea:focus { border-color: var(--dt40-orange) !important; outline: 2px solid rgb(245 114 42 / .25) !important; outline-offset: 0 !important; }
.dt40 [aria-invalid="true"] { border-color: var(--dt40-stop) !important; }
.dt40-error { color: var(--dt40-stop); font-size: 14px; font-weight: 700; }
.dt40-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .dt40-row2 { grid-template-columns: 1fr; } }
.dt40-radio, .dt40-check, .dt40-toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 400; cursor: pointer; }
.dt40-radio input, .dt40-check input, .dt40-toggle input { width: 20px; height: 20px; margin: 2px 0 0 !important; flex: 0 0 auto; accent-color: var(--dt40-orange); }
.dt40-toggle { font-weight: 700; align-items: center; }
.dt40-optional { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--dt40-muted); }
.dt40-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dt40-tz-pick { margin-top: 8px; }
.dt40.js .dt40-tz-pick:not(.is-open) { display: none; }
.dt40-partner-fields { display: flex; flex-direction: column; gap: 12px; }
.dt40.js .dt40-partner:not(.is-on) .dt40-partner-fields { display: none; }
.dt40-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.dt40-inline-form input, .dt40-inline-form select { flex: 1 1 200px; width: auto; }
.dt40-inline-form .dt40-btn { width: auto; flex: 0 0 auto; }
.dt40-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dt40 .dt40-seg button { border: 1px solid var(--dt40-field) !important; background: var(--dt40-surface) !important; border-radius: 32px !important; padding: 11px 6px !important; font: 700 14px/1.2 var(--dt40-font) !important; color: var(--dt40-ink) !important; cursor: pointer; }
.dt40 .dt40-seg button:hover { border-color: var(--dt40-orange) !important; background: var(--dt40-warm) !important; }
.dt40-stack { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.dt40-stack .dt40-linkish { align-self: center; margin-top: 4px; font-weight: 400; }
.dt40-signed-in { background: var(--dt40-ok-soft); border-radius: 14px; padding: 12px 16px; font-size: 15px; }
.dt40.js .dt40-nojs-only { display: none; }

/*
 * Themes put their own margins on paragraphs, headings and lists, which would double up with
 * the gaps below, so margins inside the study are reset. Spacing comes from flex gaps only.
 */
.dt40 :is(p, h1, h2, h3, h4, h5, ul, ol, li, form, div, section, nav, blockquote, fieldset, figure, label) { margin: 0 !important; }
/* Themes also centre and narrow content blocks (auto side margins, max-width); inside a flex
   column that would shrink them to their text, so they take the column's full width here. */
.dt40-content :is(p, h2, h3, h4, ul, ol, div, blockquote, figure) { max-width: none !important; width: auto; }

/* Lesson content. Classic themes wrap each group's blocks in .wp-block-group__inner-container. */
.dt40-content { display: flex; flex-direction: column; gap: 22px; counter-reset: dt40-q; }
.dt40-content .wp-block-group, .dt40-content .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 14px; }
.dt40-content h2, .dt40-content h3 { font-family: var(--dt40-font); font-weight: 700; color: var(--dt40-ink); text-transform: none; }
.dt40-content h2 { font-size: 22px; line-height: 1.3; }
.dt40-content h3 { font-size: 18px; line-height: 1.3; }
.dt40-content ol, .dt40-content ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.dt40-intro { font-size: 18px; color: var(--dt40-muted); }
.dt40 .dt40-cue { font-size: 14px; color: var(--dt40-muted); margin-top: -8px !important; }
.dt40-reading, .dt40-application { padding-top: 20px; border-top: 1px solid var(--dt40-line); }
.dt40 .dt40-ref, .dt40-application h3, .dt40-hold h3 { font-size: 14px !important; font-weight: 700; letter-spacing: .08em !important; text-transform: uppercase; line-height: 1.4; }
.dt40 .dt40-ref, .dt40-application h3 { color: var(--dt40-accent-text) !important; }
.dt40-note, .dt40-before { background: var(--dt40-surface); border: 1px solid var(--dt40-line); border-radius: 18px; padding: 14px 18px; font-size: 15px; }
.dt40-before { padding: 18px; font-size: 16px; }
.dt40-hold { background: var(--dt40-warm); border: 1px solid var(--dt40-warm-line); border-radius: 18px; padding: 18px; }
.dt40-content .dt40-hold, .dt40-hold .wp-block-group__inner-container { gap: 8px; }
.dt40-credit { font-weight: 700; }
.dt40-standfirst { color: var(--dt40-muted); }
.dt40-epigraph { border-left: 3px solid var(--dt40-orange); background: var(--dt40-surface); border-radius: 0 18px 18px 0; padding: 14px 18px; font-style: italic; }
.dt40-epigraph cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; font-size: 14px; color: var(--dt40-muted); }

.dt40-q { display: flex; flex-direction: column; gap: 8px; }
.dt40-reading .dt40-q__text::before { counter-increment: dt40-q; content: counter(dt40-q) ". "; font-weight: 700; color: var(--dt40-accent-text); }
.dt40-q__text { font-weight: 700; font-size: 16px; }
.dt40-q--prompt .dt40-q__text { font-style: italic; }
.dt40-q--application .dt40-q__text { font-weight: 400; }
.dt40 .dt40-q__answer { min-height: 96px !important; resize: vertical; }
.dt40-q__box { border: 1px dashed var(--dt40-field); border-radius: 18px; min-height: 56px; }
.dt40-q__written { border-left: 3px solid var(--dt40-orange); padding: 4px 0 4px 14px; white-space: normal; }
.dt40-q__written--empty { border-left-color: var(--dt40-line); color: var(--dt40-muted); font-style: italic; font-size: 15px; }
.dt40-saved { font-size: 14px; color: var(--dt40-muted); }
.dt40-saved.is-saved { color: var(--dt40-ok); }
.dt40-saved.is-error { color: var(--dt40-stop); }

.dt40-lesson-form { display: flex; flex-direction: column; gap: 20px; }
.dt40-done-card { border: 1px solid var(--dt40-line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--dt40-surface); }
.dt40-done-card__title { font-weight: 700; font-size: 17px; }
.dt40-empty-warn { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; background: var(--dt40-warn-soft); color: #6b4208; outline: none; }
.dt40-empty-warn[hidden], .dt40 .dt40-btn[hidden] { display: none !important; }
.dt40-empty-warn .dt40-linkish { align-self: center; }
.dt40-done-card--done { background: var(--dt40-ok-soft); border-color: transparent; }
.dt40-tick { color: var(--dt40-ok); font-weight: 700; margin-right: 4px; }
.dt40-pager { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--dt40-muted); }
.dt40-pager a { font-weight: 700; text-decoration: none; }
.dt40-center .dt40-pager { align-self: stretch; }

/* Done and message screens */
.dt40-bigcheck { width: 64px; height: 64px; border-radius: 50%; background: var(--dt40-ok-soft); color: var(--dt40-ok); display: grid; place-items: center; }
.dt40-bigcheck svg { width: 30px; height: 30px; }
.dt40-bar { height: 8px; border-radius: 999px; background: var(--dt40-line); overflow: hidden; align-self: stretch; }
.dt40-bar > b { display: block; height: 100%; background: var(--dt40-orange); border-radius: 999px; }
.dt40-links { padding-left: 20px; }
.dt40-bullets { padding: 16px 16px 16px 34px; display: flex; flex-direction: column; gap: 8px; }

/* Dashboard */
.dt40-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dt40-stat { background: var(--dt40-surface); border: 1px solid var(--dt40-line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dt40-stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.dt40-stat span { font-size: 13px; color: var(--dt40-muted); }
.dt40 .dt40-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; list-style: none; padding: 0; }
.dt40-grid > li { display: block; min-width: 0; }
.dt40-grid__day { aspect-ratio: 1; border-radius: 8px; background: var(--dt40-surface); border: 1px solid var(--dt40-line); font-size: 12px; display: grid; place-items: center; color: #9a9ca2; text-decoration: none !important; font-variant-numeric: tabular-nums; }
.dt40-grid > .dt40-grid__intro { grid-column: 1 / -1; }
.dt40-grid__intro .dt40-grid__day { aspect-ratio: auto; padding: 6px 0; font-size: 13px; }
a.dt40-grid__day { color: var(--dt40-ink); border-color: var(--dt40-field); }
a.dt40-grid__day:hover { border-color: var(--dt40-orange); }
.dt40-grid__day.is-done { background: var(--dt40-orange); border-color: var(--dt40-orange); color: #fefefe; }
.dt40-grid__day.is-current { border: 2px solid var(--dt40-accent); color: var(--dt40-accent-text); font-weight: 700; background: var(--dt40-surface); }
.dt40-testing { border-style: dashed; }
.dt40-devlog { padding-left: 20px; font-size: 14px; font-family: ui-monospace, Consolas, monospace; }

/* Booklet */
.dt40-booklet { max-width: 760px; gap: 28px; }
.dt40-booklet__head { display: flex; flex-direction: column; gap: 10px; }
.dt40-booklet__owner { font-weight: 700; font-size: 20px; }
.dt40-booklet__head .dt40-btn { max-width: 320px; }
.dt40-booklet__day { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--dt40-line); }

.screen-reader-text:not(:focus) { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute !important; white-space: nowrap; }

@media print {
  body * { visibility: hidden; }
  .dt40-booklet, .dt40-booklet * { visibility: visible; }
  .dt40-booklet { position: absolute; left: 0; top: 0; width: 100%; max-width: none; font-size: 12pt; }
  .dt40-noprint { display: none !important; }
  .dt40-booklet__day { break-inside: auto; border-top: 1px solid #999; }
  .dt40-q { break-inside: avoid; }
  .dt40-booklet__day + .dt40-booklet__day { break-before: page; }
  .dt40 a { color: inherit; text-decoration: none; }
}

/* The sign-up page's own intro copy (eyebrow, paragraph, steps), lined up with the form. */
.dt40-page-signup :is(.post-content, .entry-content) > :not(.dt40) { max-width: 680px; margin-left: auto !important; margin-right: auto !important; }
.dt40-page-signup .dt40-steps { list-style: none; padding: 0; counter-reset: dt40-step; display: flex; flex-direction: column; gap: 10px; }
.dt40-page-signup .dt40-steps li { counter-increment: dt40-step; display: flex; gap: 12px; align-items: flex-start; }
.dt40-page-signup .dt40-steps li::before { content: counter(dt40-step); flex: 0 0 24px; height: 24px; border-radius: 50%; background: #f5722a; color: #fefefe; font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.dt40-page-signup .dt40-eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #c62d0f; font-weight: 700; }