/* Page content on the server-rendered public pages (site-chrome.php), in the
   app's design. Only the app's own variables are used (fonts, colours,
   corners, card padding), so the appearance admin restyles these pages
   exactly as it restyles the app. The header, footer and base styles come
   from site.css, which is the app's stylesheet. */

.rmt-main{ display:block; }
.rmt-doc{ padding-bottom:24px; }
.rmt-doc > header{ margin:0 0 22px; }
.rmt-doc > header .tag{ max-width:60ch; }

/* The app's card (as on /teach/). */
.rmt-card, .rmt-doc-body{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow-resting); padding:var(--space-card-pad);
}
.rmt-doc-body{ padding:clamp(18px, 4vw, 32px); }

.rmt-doc-body, .rmt-tp, .rmt-tl{ color:var(--body-color); font-family:var(--font-body); font-size:1rem; line-height:1.6; }
.rmt-doc-body > :first-child{ margin-top:0; }
.rmt-doc-body > :last-child{ margin-bottom:0; }
.rmt-doc-body h2, .rmt-tp h2, .rmt-tl h2{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem; line-height:1.25;
  color:var(--heading-color); margin:2rem 0 .6rem; letter-spacing:-0.01em;
}
.rmt-doc-body h3{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; line-height:1.35;
  color:var(--heading-color); margin:1.6rem 0 .35rem;
}
.rmt-doc-body p, .rmt-doc-body li{ margin:0 0 .9rem; }
/* An article's byline (Resources, 2026-10-18): name, then title and
   organization underneath, smaller and lighter. */
.rmt-doc-body .rmt-byline{ margin:0 0 1.4rem; line-height:1.4; }
.rmt-byline-name{ font-weight:600; color:var(--heading-color); }
.rmt-byline-title{ font-size:.875rem; color:var(--ink-soft); }
/* A ready-to-copy sample inside an article (studio policy, 2026-10-18). */
.rmt-doc-body .rmt-sample{ margin:0 0 1.2rem; padding:clamp(16px, 3.5vw, 26px); border:1px dashed var(--line); border-radius:var(--radius-card); background:var(--paper, #f6f7f9); }
.rmt-doc-body .rmt-sample > :last-child{ margin-bottom:0; }
.rmt-doc-body ul, .rmt-doc-body ol{ padding-left:1.3rem; margin:0 0 1rem; }
.rmt-doc-body li{ margin-bottom:.4rem; }
.rmt-doc-body strong{ color:var(--heading-color); }

.rmt-doc-body .wp-block-table{ margin:1.25rem 0; overflow-x:auto; }
.rmt-doc-body table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.rmt-doc-body th, .rmt-doc-body td{ text-align:left; vertical-align:top; padding:.7rem .8rem; border-bottom:1px solid var(--line); }
.rmt-doc-body thead th{ font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.rmt-doc-body tbody tr:last-child td{ border-bottom:none; }

/* The app's primary button, for links. */
.rmt-btn{
  display:inline-block; font-family:var(--font-body); font-weight:700; font-size:.98rem;
  background:var(--button-bg); color:var(--button-text) !important; text-decoration:none;
  padding:14px 26px; border-radius:var(--radius-btn); line-height:1.2; min-height:44px;
}
.rmt-btn:hover{ filter:brightness(1.06); }

/* ---- Teacher pages ---- */
.rmt-tp, .rmt-tl{ max-width:760px; margin:0 auto; padding:28px 20px 24px; }
.rmt-tp > * + *{ margin-top:18px; }
.rmt-tp-crumbs{ font-size:.85rem; color:var(--ink-soft); margin:0 0 4px; }
.rmt-tp-top{ display:grid; grid-template-columns:minmax(0, 300px) 1fr; gap:26px; align-items:start; }
.rmt-tp-photo{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-tile); background:var(--brass); display:flex; align-items:center; justify-content:center; }
.rmt-tp-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.rmt-tp-initial{ font-family:var(--font-display); font-weight:600; font-size:4.5rem; color:var(--near-black); }
.rmt-tp-head h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem, 4vw, 2.5rem); letter-spacing:-0.02em; line-height:1.1; color:var(--heading-color); margin:0 0 4px; }
.rmt-tp-tagline{ margin:0 0 14px; color:var(--ink-soft); font-size:1.02rem; }
.rmt-tp-price{ margin:0; font-weight:700; font-size:1.2rem; color:var(--heading-color); }
.rmt-tp-price span{ font-weight:400; font-size:.82rem; color:var(--ink-soft); }
.rmt-tp-trial{ display:inline-block; margin:8px 0 0; font-size:.8rem; font-weight:600; color:var(--brass); border:1px solid currentColor; border-radius:var(--radius-chip); padding:3px 10px; }
.rmt-tp-head .rmt-btn{ margin-top:16px; }
.rmt-tp-small{ font-size:.85rem; color:var(--ink-soft); margin:8px 0 0; }
.rmt-tp h2{ margin-top:0; }
.rmt-tp-bio p{ margin:0 0 .9rem; }
.rmt-tp-bio p:last-child{ margin-bottom:0; }
.rmt-tp-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin:0; }
.rmt-tp-facts dt{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.rmt-tp-facts dd{ margin:2px 0 0; }
.rmt-tp-review{ margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--line); }
.rmt-tp-review:last-of-type{ border-bottom:none; }
.rmt-tp-review blockquote{ margin:4px 0; padding:0; border:0; font-style:normal; }
.rmt-tp-review blockquote p{ margin:0; }
.rmt-tp-stars{ margin:0; color:var(--brass); letter-spacing:.1em; }
.rmt-tp-review figcaption{ font-size:.9rem; color:var(--ink-soft); }
.rmt-tp-note{ font-size:.92rem; color:var(--ink-soft); background:transparent; border:1px solid var(--line); border-radius:var(--radius-card); padding:14px 18px; }
.rmt-tp-more{ text-align:center; color:var(--ink-soft); }

.rmt-tl > header{ margin:0 0 22px; }
.rmt-tl-list{ list-style:none; padding:0; margin:0; }
.rmt-tl-list li{ padding:14px 0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; }
.rmt-tl-list li:first-child{ padding-top:0; }
.rmt-tl-list li:last-child{ border-bottom:none; padding-bottom:0; }
.rmt-tl-list a{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; text-decoration:none; }
.rmt-tl-list a:hover{ text-decoration:underline; }
.rmt-tl-list span{ color:var(--ink-soft); }

@media (max-width:640px){
  .rmt-tp-top{ grid-template-columns:1fr; gap:16px; }
  .rmt-tp-facts{ grid-template-columns:1fr; }
  .rmt-tp-head .rmt-btn{ display:block; text-align:center; }
}

/* The app's header items are buttons; here some are links, so no underline. */
.site-header a.sh-link, .site-header a.sh-item, .site-header a.sh-brand{ text-decoration:none; }
.rmt-tl-list.rmt-card{ padding:clamp(18px, 4vw, 28px); }

/* The teacher's photo in the results card's shape and crop (2026-10-13):
   the card's photo column (273 x 406) on a computer with the computer crop,
   4:3 full width on a phone (560px and below) with the phone crop. The
   variables come from teacher-pages.php rmt_tp_photo_vars(), as the app's
   photoFocusVars() writes them for the card. */
.rmt-tp-top--card{ grid-template-columns:273px minmax(0, 1fr); }
.rmt-tp-photo--card{ position:relative; display:block; width:273px; aspect-ratio:273 / 406; }
.rmt-tp-photo--card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%); transform:scale(var(--fz,1)); transform-origin:var(--fx,50%) var(--fy,50%); }
@media (max-width:640px){
  .rmt-tp-top--card{ grid-template-columns:220px minmax(0, 1fr); }
  .rmt-tp-photo--card{ width:220px; }
}
@media (max-width:560px){
  .rmt-tp-top--card{ grid-template-columns:1fr; }
  .rmt-tp-photo--card{ width:100%; aspect-ratio:4 / 3; }
  .rmt-tp-photo--card img{ object-position:var(--px,50%) var(--py,50%); transform:scale(var(--pz,1)); transform-origin:var(--px,50%) var(--py,50%); }
}