/* ==========================================================================
   Prakriti Rakshak  |  document stylesheet
   Used only on about.html, where the printed "स्वयंसेवक सेवा-संहिता एवं
   आचार-संहिता मार्गदर्शिका" is reproduced page-for-page as A4 sheets:
   letterhead, logo watermark, justified Devanagari body, signature block.
   ========================================================================== */

.doc-stage{background:#c9c4b8;padding:24px 0 42px}

.doc-bar{
  width:794px;max-width:calc(100% - 32px);margin:0 auto 18px;
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.doc-bar p{margin:0;font-size:.92rem;color:#3b3a34;max-width:34rem}
.doc-bar .acts{display:flex;gap:9px;flex-wrap:wrap}

/* --- the sheet ------------------------------------------------------- */
.sheet{
  width:794px;max-width:calc(100% - 16px);min-height:1123px;
  margin:0 auto 22px;padding:52px 60px 58px;
  background:#fff;position:relative;overflow:hidden;
  box-shadow:0 2px 5px rgba(0,0,0,.20),0 16px 34px -20px rgba(0,0,0,.55);
  font-family:"Noto Sans Devanagari","Segoe UI",Calibri,"Nirmala UI","Mukta",system-ui,sans-serif;
  font-size:15px;line-height:1.86;color:#000;
}
/* the logo, blown up and faded — same watermark the PDF carries on every page */
.sheet::before{
  content:"";position:absolute;left:50%;top:50%;
  width:98%;aspect-ratio:560/585;transform:translate(-50%,-50%);
  background:url("../img/logo.png") center/contain no-repeat;
  opacity:.095;pointer-events:none;
}
.sheet>*{position:relative;z-index:1}

/* --- letterhead (page 1) --------------------------------------------- */
.lh{display:flex;align-items:flex-start;gap:18px}
.lh-logo{width:152px;flex:none;border:1px solid #e0e0e0;padding:4px;background:#fff}
.lh-mid{flex:1;text-align:center;padding-top:4px}
.sheet .lh-sans{margin:0 0 2px;font-size:15px;font-weight:600;color:#1a7a24;text-align:center}
.sheet .lh-name{
  margin:0;text-align:center;font-size:42px;line-height:1.12;font-weight:400;letter-spacing:.01em;
  font-family:"Segoe UI",Calibri,"Noto Sans",system-ui,sans-serif;color:#111;
}
.lh-name .rk{color:#e8102a}
.sheet .lh-act{margin:3px 0 0;text-align:center;font-size:14.5px;font-family:"Segoe UI",Calibri,system-ui,sans-serif}
.lh-reg{
  position:absolute;right:60px;top:56px;font-size:13px;
  font-family:"Segoe UI",Calibri,system-ui,sans-serif;color:#111;
}
.sheet .lh-addr{margin:10px 0 0;font-size:13.4px;line-height:1.62;text-align:center;
  font-family:"Segoe UI",Calibri,"Noto Sans Devanagari",system-ui,sans-serif}
.lh-addr a{color:#1155cc;text-decoration:none}
.lh-addr a:hover{text-decoration:underline}

/* --- document typography --------------------------------------------- */
.sheet p{margin:0 0 12px;text-align:justify;text-justify:inter-word}
.sheet .doc-title{margin:26px 0 4px;font-size:26px;font-weight:700;text-align:center;line-height:1.4}
.sheet .doc-sub{margin:0 0 24px;font-size:17.5px;font-weight:700;text-align:center}
.sheet h2{
  margin:24px 0 12px;font-size:19px;font-weight:700;line-height:1.5;color:#000;
  font-family:"Noto Sans Devanagari","Mukta",system-ui,sans-serif;
}
.sheet h2:first-child{margin-top:0}
.sheet h3{margin:18px 0 8px;font-size:16px;font-weight:700;color:#000;
  font-family:"Noto Sans Devanagari","Mukta",system-ui,sans-serif}
.sheet ul,.sheet ol{margin:0 0 14px;padding-left:54px}
.sheet li{margin-bottom:5px;text-align:left}
.sheet ul{list-style:disc}
.sheet strong{font-weight:700}
.b{font-weight:700}
.ind{margin-left:42px !important;text-align:justify}
.ctr{text-align:center !important}
.sheet .q{margin-left:42px}
.flow{text-align:left !important}
.emo{font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:1em}
.msg{display:flex;gap:38px;flex-wrap:wrap;margin:0 0 13px}
.tight{margin-bottom:6px}
.sheet .plain li{list-style:none}
.sheet ul.plain{padding-left:42px}

/* signature / acknowledgement block */
.fields{margin-top:18px}
.sheet .fields p{text-align:left;margin:0 0 15px}
.rule{display:inline-block;border-bottom:1px solid #000;min-width:290px;height:1.1em;vertical-align:-.15em}
.rule.sm{min-width:230px}

/* closing block */
.sheet .endblock{margin-top:34px;text-align:center}
.sheet .endblock p{text-align:center}
.sheet .endblock .org{font-size:17px;font-weight:600;margin:0 0 10px}
.sheet .endblock .svc{font-size:15px;margin:0 0 12px}
.sheet .split{display:flex;justify-content:space-between;gap:20px;font-size:15px;margin:0 0 26px}

/* --- responsive ------------------------------------------------------ */
@media (max-width:860px){
  .doc-stage{padding:16px 0 28px}
  .sheet{padding:30px 24px 36px;min-height:0;font-size:15px;line-height:1.9}
  .lh{flex-direction:column;align-items:center;gap:10px}
  .lh-logo{width:120px}
  .lh-name{font-size:31px}
  .lh-reg{position:static;text-align:center;margin:0 0 8px;display:block}
  .doc-title{font-size:21px}
  .doc-sub{font-size:15.5px}
  .sheet h2{font-size:17px}
  .sheet ul,.sheet ol{padding-left:30px}
  .ind,.q{margin-left:0 !important}
  .sheet p{text-align:left}
  .split{flex-direction:column;gap:4px}
  .rule{min-width:0;width:100%;display:block}
}

/* --- printing: hand it back as the original document ----------------- */
@media print{
  .doc-stage{background:#fff;padding:0}
  .doc-bar{display:none}
  .sheet{width:auto;max-width:none;margin:0;padding:16mm 16mm;box-shadow:none;min-height:0;
         page-break-after:always;break-after:page}
  .sheet:last-child{page-break-after:auto;break-after:auto}
  .sheet::before{opacity:.10}
  .lh-reg{position:absolute;right:16mm;top:16mm}
}