/* Shared letterhead for the outreach letters in Coach Dashboard -> Leads -> Scripts.
   One file so doctor-letter.html and dentist-letter.html cannot drift apart.

   Locked brand colours only: #221F20 black, #EEB735 gold. The logo is
   osteostrong_logo_white.png - the brand-kit asset, white wordmark + gold
   emblem on TRUE transparency. The older osteostrong_logo.png is RGB with no
   alpha and paints an opaque grey #A6A6A6 rectangle on any background, which
   is why branded pieces here kept shipping with no logo at all. Do not swap
   them and do not redraw the mark.

   These letters get MAILED, so print is the primary medium, not the screen.
   Chrome prints with "Background graphics" OFF by default, which would drop
   the black masthead while leaving its text white - a blank header on the page
   a practice actually receives. print-color-adjust:exact forces it through.
   Any new coloured block must be added to the @media print rule below. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --os-black:#221F20;
  --os-gold:#EEB735;
  --white:#FFFFFF;
  --body:#374151;
  --card:#f4f4f4;
  --line:#dcdcdc;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:'Inter',sans-serif;
  color:var(--body);
  background:#cfcfcf;
  line-height:1.5;
  padding:32px 16px;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:8.5in;
  margin:0 auto;
  background:var(--white);
  box-shadow:0 2px 28px rgba(34,31,32,0.22);
}

.masthead{
  background:var(--os-black);
  color:var(--white);
  padding:20px 0.75in 18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:4px solid var(--os-gold);
}
.brand .oslogo{display:block;height:28px;width:auto;margin-bottom:8px;}
.brand h1{
  font-family:'Newsreader',serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:-0.01em;
  line-height:1.05;
}
.brand .loc{
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--os-gold);margin-top:5px;font-weight:600;
}
.masthead .tag{
  text-align:right;font-size:9.5px;letter-spacing:0.15em;text-transform:uppercase;
  color:#c9c7c8;font-weight:600;line-height:1.7;
}

/* DRAFT banner. This is a reference copy inside the Coach Dashboard, not an
   approved mailing - it must never be posted without John's sign-off, and the
   banner is deliberately loud on screen and suppressed in print so a mailed
   copy is clean once he approves. */
.draftbar{
  background:#FFF8E6;border-bottom:1px solid var(--os-gold);
  padding:8px 0.75in;font-size:11px;font-weight:700;color:#6B4E00;
}

.inner{padding:26px 0.75in 0.45in;}

p.l{font-size:12.8px;color:var(--body);margin-bottom:11px;}
p.l strong{color:var(--os-black);font-weight:600;}
p.l.lede{
  font-family:'Newsreader',serif;font-size:15.5px;line-height:1.45;
  color:var(--os-black);margin-bottom:16px;max-width:64ch;
}

.date{font-size:11.5px;color:var(--body);margin-bottom:16px;}

/* The sourced clinical paragraph. Boxed so it reads as citation, not sales
   copy, and so the limitation sits visibly beside the finding. */
.evidence{
  background:var(--card);border-left:4px solid var(--os-gold);
  padding:13px 16px;margin:4px 0 16px;
}
.evidence p{font-size:12.3px;color:var(--os-black);line-height:1.5;}
.evidence .cite{
  display:block;margin-top:8px;font-size:10.5px;font-style:italic;color:var(--body);
}

ul.straight{list-style:none;font-size:12.5px;color:var(--body);margin:2px 0 14px;}
ul.straight li{padding-left:16px;position:relative;margin-bottom:8px;}
ul.straight li::before{
  content:"";position:absolute;left:0;top:6px;
  width:7px;height:7px;background:var(--os-gold);transform:rotate(45deg);
}
ul.straight li strong{color:var(--os-black);font-weight:600;}

.sig{margin-top:18px;font-size:12.5px;color:var(--os-black);}
.sig .name{font-family:'Newsreader',serif;font-size:17px;font-weight:600;margin-bottom:3px;}
.sig .meta{font-size:11.5px;color:var(--body);line-height:1.6;margin-top:6px;}

.foot{
  margin-top:16px;padding-top:9px;border-top:2px solid var(--os-gold);
  font-size:8.4px;color:var(--body);line-height:1.45;
}

@media print{
  body{background:#fff;padding:0;}
  .page{box-shadow:none;max-width:none;}
  .draftbar{display:none;}
  .masthead,.evidence,.foot,ul.straight li::before,.brand .loc{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .evidence,.sig{break-inside:avoid;page-break-inside:avoid;}
  /* Keep a one-page letter on one page. Without this the signature block and
     the legal footer spill a couple of hundred characters onto a second sheet
     - which is what the practice would actually be handed. */
  .inner{padding:20px 0.7in 0.25in;}
  p.l{margin-bottom:8px;}
  p.l.lede{margin-bottom:12px;}
  ul.straight li{margin-bottom:6px;}
  .sig{margin-top:13px;}
  .foot{margin-top:11px;padding-top:7px;font-size:7.8px;line-height:1.38;}
}
@page{margin:0.4in;}

@media (max-width:640px){
  .masthead{flex-direction:column;align-items:flex-start;gap:9px;}
  .masthead .tag{text-align:left;}
}