/* St. Patrick styling for the PDS (Parish Data System) family registration form.
   Replaces PDS's RegCSS.css. Everything is scoped to #pds so it cannot leak into the
   site, and nothing here renames or removes anything PDS's RegJS.js depends on.
   The show/hide rules for Spouse and Member rows below are FUNCTIONAL: keep them. */

#pds{font-family:var(--sans);color:var(--charcoal);font-size:16px;line-height:1.45;margin-top:34px}
#pds .formcard{background:#fff;border:1px solid var(--stone);border-top:3px solid var(--gold);padding:30px 34px 36px}

/* PDS chrome we do not show: their blue title bar, footer bar and top submit row */
#pds #maindiv-header .fotable,#pds #maindiv-footer,#pds .pds-top{display:none}
#pds .maindiv,#pds #maindiv-form{width:auto;margin:0;text-align:left}
#pds .contentdiv{background:none}
#pds .aspace{height:8px}
#pds #noscriptmsg,#pds #downloadInstead p{font-size:16px;color:var(--ink-soft);padding:12px 0;text-align:left}

/* labels */
#pds span.lbl{font:600 14.5px/1.3 var(--sans);color:var(--charcoal)}
#pds span.reqlbl{color:#9B2C1F;font-weight:700;margin-right:2px}
#pds span.titlelbl{display:inline-block;font:600 27px/1.15 var(--serif);color:var(--green-deep);padding:26px 0 4px}
#pds span.titlelbl b{font:600 16px var(--sans)}

/* layout table */
#pds table.fotable{border-collapse:collapse;width:100%}
#pds .fotable td{padding:7px 10px 7px 0;vertical-align:middle;text-align:left;border:0}
#pds table#mainTable{table-layout:fixed}
#pds col.c-l{width:15%}#pds col.c-f{width:35%}#pds col.c-x{width:0}
@media (min-width:761px){
  #pds #mainTbody > tr:first-child span.titlelbl{font:600 14.5px/1.3 var(--sans);color:var(--charcoal);padding:0}
  #pds #mainTbody > tr:first-child td{padding-top:10px}
}
#pds hr,#pds hr.hrbet,#pds hr.hrsub{border:0;border-top:1px solid var(--stone);margin:14px 0;width:100%}

/* fields */
#pds input.textboxstyle,#pds select.pulldownstyle,#pds textarea{
  box-sizing:border-box;width:100%!important;max-width:100%;height:auto;min-height:44px;
  padding:9px 12px;font:16px/1.3 var(--sans);color:var(--charcoal);
  background:#fff;border:1px solid #CFC7B5;border-radius:2px}
#pds select.pulldownstyle{padding-right:34px;-webkit-appearance:none;appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232E522C' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center}
#pds input.textboxstyle:focus,#pds select.pulldownstyle:focus,#pds textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(46,82,44,.15)}
/* fields that sit side by side in one cell: birth month/day/year, phone parts, ID/env */
#pds select[id$=BirthMonth],#pds select[id$=BirthDay]{width:86px!important;display:inline-block;margin-right:6px}
#pds select[id$=BirthYear]{width:104px!important;display:inline-block}
#pds input[id^=txnAddrPhone][id$=Num1],#pds input[id^=txnAddrPhone][id$=Num2]{width:74px!important;display:inline-block}
#pds input[id^=txnAddrPhone][id$=Num3]{width:96px!important;display:inline-block}
#pds input#txaFamIDEnv{width:140px!important;margin-left:6px}
#pds input#appCaptcha{width:220px!important;margin-top:8px}
#pds input[type=radio],#pds input[type=checkbox]{accent-color:var(--green);width:18px;height:18px;vertical-align:-3px;position:static;margin:0 4px 0 0}

/* buttons */
#pds .btnstyle{font:700 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:12px 20px;margin:4px 8px 4px 0;width:auto!important;min-width:110px;cursor:pointer;
  background:#fff;color:var(--green);border:2px solid var(--green);border-radius:2px}
#pds .btnstyle:hover:enabled{background:var(--green);color:#fff}
#pds .btnstyle:disabled{opacity:.4;cursor:default}
#pds #btnSubmitButton2{background:var(--green);color:#fff;padding:15px 34px}
#pds #btnSubmitButton2:hover{background:var(--green-deep);border-color:var(--green-deep)}
#pds input[type=reset].btnstyle{border-color:transparent;color:var(--ink-soft)}
#pds input[type=reset].btnstyle:hover{background:none;color:var(--charcoal);text-decoration:underline}

/* captcha */
#pds #captsection{margin:18px 0 6px;padding:18px;background:var(--parchment);border:1px solid var(--stone)}
#pds #idcaptcha{display:inline-block;border:1px solid var(--stone)!important;background:#fff;vertical-align:middle}
#pds #captsection > div{display:inline-block;margin:0 0 0 12px!important;vertical-align:middle}
#pds .refreshcaptcha{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:2px solid var(--green);color:var(--green);font-size:20px;text-decoration:none;cursor:pointer;background:#fff}
#pds .refreshcaptcha:hover{background:var(--green);color:#fff}

/* Questions the parish chose not to ask (still sent to PDS, just blank).
   Hide the field's cell and its label cell; works for members added later too. */
#pds td:has(> select[id$=Ethnicity]),#pds td:has(+ td > select[id$=Ethnicity]),
#pds td:has(> select[id$=Lang1]),#pds td:has(+ td > select[id$=Lang1]),
#pds td:has(> input[id$=Nickname]),#pds td:has(+ td > input[id$=Nickname]),
#pds td:has(> input[id$=MaidName]),#pds td:has(+ td > input[id$=MaidName]),
#pds td:has(> select[id$=Relationship]),#pds td:has(+ td > select[id$=Relationship]){display:none!important}

/* Optional mailing address section (street address is required and stays) */
#pds tr:has([id^=txaMailing]),#pds tr:has([id^=cboMailing]),#pds tr:has(+ tr #txaMailingAddress),#pds tr:has(#txaMailingZIP) + tr:has(hr){display:none!important}

/* FUNCTIONAL: section show/hide driven by classes RegJS.js toggles on #mainTable */
#pds table.fotable tr.spouseInfo,#pds table tr.Member1Info,#pds table tr.FundInfo{display:none}
#pds table.fotable.showSpouseInfo tr.spouseInfo,#pds table.showMember1Info tr.Member1Info,#pds table.showFundInfo tr.FundInfo{display:table-row}

/* FUNCTIONAL: PDS pop-ups (validation messages, confirm, please wait) */
#pds .modal{display:none;position:fixed;z-index:2000;inset:0;padding-top:16vh;overflow:auto;background:rgba(20,38,19,.55)}
#pds .modal-content{position:relative;background:#fff;margin:auto;width:min(440px,90vw);border-top:3px solid var(--gold);
  box-shadow:0 18px 50px rgba(0,0,0,.28);animation:pdsIn .25s ease}
@keyframes pdsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#pds .modal-header,#pds .modal-footer{padding:14px 22px;background:var(--green);color:#fff}
#pds .modal-header h3,#pds .modal-footer h3{margin:0;font:600 22px var(--serif);color:#fff}
#pds .modal-footer h3{font-size:17px}
#pds .modal-body{padding:18px 22px;font-size:16px;color:var(--charcoal)}
#pds .modal-body p{text-align:left;margin:0 0 10px}
#pds .closebtn{float:right;font-size:28px;line-height:1;color:#fff;cursor:pointer}
#pds .closebtn:hover{color:#F2E9D2}
#pds .modalmark{display:none}
#pds .loader{border:4px solid var(--stone);border-top-color:var(--green);border-radius:50%;width:28px;height:28px;margin:auto;animation:pdsSpin 1s linear infinite}
@keyframes pdsSpin{to{transform:rotate(360deg)}}
#pds #ajax-progressbar{position:fixed;top:40%;left:50%;width:320px;height:54px;margin:-27px 0 0 -160px;line-height:54px;
  text-align:center;background:var(--green);color:#fff;font-size:15px;z-index:2100;box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* FUNCTIONAL: PDS date picker */
#pds .calendar-box{display:none;position:absolute;z-index:1000;width:250px;padding:6px;margin-top:4px;background:#fff;border:1px solid var(--stone);box-shadow:0 8px 24px rgba(0,0,0,.15)}
#pds .calendar-box table{width:100%}
#pds .calendar-box table td{width:14%;font:13px/24px var(--sans);text-align:center;padding:0}
#pds .calendar-box a{text-decoration:none}
#pds .calendar-box .today a{background:var(--parchment);padding:0 5px}
#pds .calendar-box .selected a{background:var(--green);color:#fff;padding:0 5px}
#pds .calendar-box .calendar-title{text-align:center}
#pds .calendar-box .calendar-cancel{width:100%}

/* PDS help bubbles */
#pds .tooltip{position:relative;display:inline-block}
#pds .tooltip .tooltiptext{visibility:hidden;opacity:0;position:absolute;z-index:1;bottom:125%;left:50%;width:180px;margin-left:-90px;
  padding:8px;background:var(--green-deep);color:#fff;font-size:13px;text-align:center;transition:opacity .3s}
#pds .tooltip:hover .tooltiptext{visibility:visible;opacity:1}
#pds .questionmark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--parchment);border:1px solid var(--green);color:var(--green);font-weight:700;font-size:13px;cursor:pointer}

/* phones: one field per line, labels above fields, everything full width */
@media (max-width:760px){
  #pds .formcard{padding:22px 18px 28px;margin:0 -14px}
  #pds table#mainTable{table-layout:auto}
  #pds table#mainTable colgroup{display:none}
  #pds table.fotable,#pds .fotable tbody,#pds .fotable tr,#pds .fotable td{display:block;width:auto!important}
  /* keep PDS's show/hide working in block layout */
  #pds table.fotable tr.spouseInfo,#pds table tr.Member1Info,#pds table tr.FundInfo{display:none}
  #pds table.fotable.showSpouseInfo tr.spouseInfo,#pds table.showMember1Info tr.Member1Info,#pds table.showFundInfo tr.FundInfo{display:block}
  #pds .fotable td{padding:0}
  #pds .fotable td:empty{display:none}
  #pds .fotable td > span.lbl:first-child,#pds .fotable td > span.reqlbl:first-child{display:inline-block;margin-top:16px;margin-bottom:6px}
  #pds .fotable td > span.reqlbl:first-child + span.lbl{margin-top:16px;margin-bottom:6px;display:inline-block}
  #pds span.titlelbl{font-size:26px;padding:26px 0 2px}
  #pds input.textboxstyle,#pds select.pulldownstyle{font-size:16px;min-height:48px}
  #pds select[id$=BirthMonth],#pds select[id$=BirthDay]{width:calc(30% - 6px)!important}
  #pds select[id$=BirthYear]{width:38%!important}
  #pds input[id^=txnAddrPhone][id$=Num1],#pds input[id^=txnAddrPhone][id$=Num2]{width:72px!important}
  #pds input[id^=txnAddrPhone][id$=Num3]{width:96px!important}
  #pds input#txaFamIDEnv{width:100%!important;margin:8px 0 0}
  #pds input[type=radio]{margin:14px 8px 0 0}
  #pds hr,#pds hr.hrbet{margin:22px 0 4px}
  #pds .btnstyle{width:100%!important;margin:6px 0;padding:15px 20px}
  #pds input[id^=btnMember][id$=Btn],#pds #btnSpouseBtn,#pds input[value=Hide],#pds input[value=Show]{width:auto!important;min-width:0;padding:8px 14px;margin:20px 12px 0 0;font-size:12px}
  #pds #captsection > div{margin:10px 0 0!important;display:block}
}