/* Padosi Clinic: the letterhead hero and the pad's body. Phone first; wide.css adds the columns. */

/* ---- The letterhead -------------------------------------------------------------------- */

.lh {
  background: var(--white);
  border-bottom: 6px double var(--violet);
}

.lh-sheet {
  display: grid;
  grid-template-areas: "head" "act" "now" "docs" "top";
  gap: 1.25rem;
  padding: 1.5rem 0 1.75rem;
}

.lh-top {
  grid-area: top;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.lh-mark {
  display: none;
}

.lh-kind {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--violet);
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.lh-branches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  font-size: 1rem;
}

.lh-branches li {
  display: flex;
  flex-direction: column;
}

.lh-branches strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
}

.lh-branches .num {
  font-weight: 700;
  font-size: 1.1rem;
}

.lh-head {
  grid-area: head;
}

.lh-head h1 {
  margin-bottom: 0.6rem;
}

.lh-text {
  font-size: 1.2rem;
  color: var(--ink-2);
  margin: 0;
}

.lh-now {
  grid-area: now;
}

.lh-label {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 0.5rem;
}

.lh-label-sub {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-2);
}

.lh-today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--violet);
}

.lh-today-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.lh-branch {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}

.lh-branch:hover {
  text-decoration: underline;
}

.lh-state {
  font-weight: 700;
  font-size: 1.15rem;
}

.is-open .lh-state {
  color: var(--violet);
}

.lh-hours {
  color: var(--ink-2);
  font-size: 1rem;
}

.lh-act {
  grid-area: act;
}

.lh-docs-wrap {
  grid-area: docs;
}

.lh-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--violet);
}

.lh-doc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.lh-doc-name {
  font-size: 1.25rem;
  margin: 0;
}

.lh-doc-name a {
  color: var(--ink);
  text-decoration: none;
}

.lh-doc-name a:hover {
  text-decoration: underline;
}

.lh-doc-role {
  font-weight: 700;
  color: var(--violet);
  margin: 0.1rem 0 0.15rem;
}

.lh-doc-days {
  margin: 0.2rem 0 0;
  font-size: 1rem;
}

.lh-doc-where {
  color: var(--ink-2);
}

/* ---- Monograms and state marks ------------------------------------------------------- */

.mono {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border: 4px double var(--violet);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--violet);
  background: var(--paper);
  padding-top: 0.15rem;
}

.mono-l {
  width: 5rem;
  height: 5rem;
  border-width: 6px;
  font-size: 1.7rem;
}

.state-mark {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  vertical-align: 0.02em;
  margin-right: 0.15rem;
}

.state-open {
  background: var(--violet);
}

.state-later {
  border: 2px solid var(--violet);
}

.state-closed {
  border-radius: 0;
  height: 3px;
  background: var(--ink-2);
  vertical-align: 0.3em;
}

.state-away {
  border-radius: 0;
  width: 0.8rem;
  height: 0.8rem;
  background: linear-gradient(45deg, transparent 42%, var(--ink-2) 42%, var(--ink-2) 58%, transparent 58%);
}

/* ---- Registration line --------------------------------------------------------------- */

.reg {
  font-size: 0.95rem;
  margin: 0.2rem 0 0;
  line-height: 1.45;
}

.reg-k {
  color: var(--ink-2);
}

.reg .num {
  font-weight: 700;
}

.reg-check {
  white-space: nowrap;
  font-weight: 700;
}

.degrees {
  margin: 0;
  font-size: 1rem;
}

/* ---- Actions ------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1rem 0;
}

.actions-big {
  margin: 0;
}

.actions-big .btn {
  flex: 1 1 100%;
}

.link-wa {
  font-weight: 700;
}

/* ---- Pad body: sections with a margin rail ------------------------------------------- */

.sheet,
.page-head {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
}

.sheet-tint {
  background: var(--white);
}

.page-head {
  background: var(--white);
  border-bottom: 2px solid var(--violet);
}

.sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
}

.rail {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--violet);
  border-top: 2px solid var(--violet);
  padding-top: 0.3rem;
  width: max-content;
  min-width: 3rem;
}

.rail a {
  color: inherit;
}

.rail:empty {
  border: 0;
}

.sheet-body {
  min-width: 0;
}

.sheet-title {
  margin-bottom: 0.4rem;
}

.sheet-text,
.lede {
  font-size: 1.15rem;
  color: var(--ink-2);
}

.lede {
  font-size: 1.25rem;
}

.more {
  margin-top: 1rem;
  font-weight: 700;
}

.two {
  display: grid;
  gap: 1.5rem;
}

.bullets {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.bullets li {
  margin-bottom: 0.4rem;
  max-width: 65ch;
}

.bullets li::marker {
  color: var(--violet);
}

.notes {
  color: var(--ink-2);
  font-size: 1rem;
}

.bring h3 {
  font-size: 1.2rem;
}

/* ---- Steps --------------------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.steps li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.step-no {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--violet);
  border-radius: 50%;
  font-weight: 700;
  color: var(--violet);
}

.step-body {
  display: flex;
  flex-direction: column;
  padding-top: 0.25rem;
}

.step-body span {
  color: var(--ink-2);
}

/* ---- Tables: the day board and fee summary -------------------------------------------- */

.board,
.fee-summary,
.rate-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 0.5rem;
}

.board thead,
.fee-summary thead {
  display: none;
}

.board tr,
.fee-summary tr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.board tbody,
.fee-summary tbody {
  border-top: 2px solid var(--violet);
  display: block;
}

.board th,
.board td,
.fee-summary th,
.fee-summary td {
  display: block;
  text-align: left;
  padding: 0;
  font-weight: 400;
}

.board th {
  grid-column: 1 / -1;
}

.board th a,
.fee-summary th a {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
}

.board-role {
  display: block;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.board td[data-label]::before {
  content: attr(data-label) ": ";
  color: var(--ink-2);
}

.board td.board-state {
  grid-column: 1 / -1;
  font-weight: 700;
}

.board td.board-state::before {
  content: "";
}

.row-away th a {
  color: var(--ink-2);
}

.board-off {
  color: var(--ink-2);
  font-size: 1rem;
}

.fee-summary .col-fee {
  text-align: right;
  font-weight: 700;
}

.fee-summary th {
  grid-row: span 2;
}

.rate-note {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-2);
}

.rate-fast {
  color: var(--violet);
}

.fees-note {
  font-weight: 700;
  border-left: 4px solid var(--violet);
  padding-left: 0.8rem;
}

/* ---- Rate board ---------------------------------------------------------------------- */

.rates {
  margin: 2rem 0;
}

.rates-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  border-bottom: 2px solid var(--violet);
  padding-bottom: 0.35rem;
  margin-bottom: 0;
}

.rates-title .local {
  font-weight: 500;
  color: var(--violet);
  font-size: 1.15rem;
}

.rate-table thead {
  display: none;
}

.rate-table tr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.rate-table th,
.rate-table td {
  display: block;
  text-align: left;
  padding: 0;
  font-weight: 400;
}

.rate-table th {
  font-weight: 700;
}

.rate-table .col-local {
  grid-column: 1;
  grid-row: 2;
  color: var(--ink-2);
}

.rate-table .col-local:empty {
  display: none;
}

.rate-table .col-fee {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

.price {
  font-weight: 700;
  font-size: 1.15rem;
  white-space: nowrap;
}

.price .from,
.price .unit {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.unit {
  display: block;
}

.pcpndt {
  border: 2px solid var(--ink);
  padding: 0.6rem 0.8rem;
}

.rates-note {
  font-size: 1rem;
  color: var(--ink-2);
  margin-top: 0.6rem;
}

.jump ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.jump a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}

.jump a:hover {
  border-color: var(--violet);
}

/* ---- Specialities -------------------------------------------------------------------- */

.specs {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 2px solid var(--violet);
}

.spec {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.drawing {
  color: var(--violet);
  width: 3.5rem;
  height: 3.5rem;
}

.spec-name {
  margin-bottom: 0.2rem;
}

.spec-formal {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink-2);
}

.spec p {
  margin-bottom: 0.3rem;
}

.spec-for {
  color: var(--ink-2);
  font-size: 1rem;
}

.spec-who {
  font-size: 1rem;
  font-weight: 700;
}

/* ---- Branches ------------------------------------------------------------------------ */

.branches {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}

.branch {
  border-top: 2px solid var(--violet);
  padding-top: 0.8rem;
}

.branch-name {
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}

.branch-state {
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.branch-state.is-open {
  color: var(--violet);
}

.branch-closure {
  font-weight: 400;
}

.branch-addr {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.branch-line {
  margin-bottom: 0.2rem;
  color: var(--ink-2);
}

.hours {
  margin: 0.8rem 0;
  font-size: 1rem;
  max-width: 34rem;
}

.hours div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--line);
}

.hours dt {
  font-weight: 700;
}

.hours dd {
  margin: 0;
}

.hours .is-today {
  background: var(--tint);
}

.closures {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  font-size: 1rem;
}

.branch-who {
  font-size: 1rem;
}

.getting {
  font-size: 1rem;
}

.branch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: none;
  margin-top: 0.8rem;
}

.branch-reg {
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* ---- Week tables --------------------------------------------------------------------- */

.week {
  margin: 1.25rem 0 2rem;
}

.week-table {
  display: none;
}

.week-phone {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  border-top: 2px solid var(--violet);
}

.week-phone > li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.week-phone > li > strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
}

.week-phone ul {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  font-size: 1rem;
}

.week-phone ul li {
  padding: 0.1rem 0.3rem;
}

.week-phone .is-today {
  background: var(--tint);
  font-weight: 700;
}

.wk-day {
  display: inline-block;
  min-width: 6.5rem;
  font-weight: 700;
}

.week-note {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.person-week {
  border-collapse: collapse;
  width: 100%;
  max-width: 40rem;
  margin: 0.75rem 0 1rem;
  border-top: 2px solid var(--violet);
}

.person-week th,
.person-week td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.person-week th {
  width: 8.5rem;
}

.person-week .is-today {
  background: var(--tint);
}

.today-tag {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pw-slot {
  display: block;
}

.pw-slot + .pw-slot {
  margin-top: 0.3rem;
}

.pw-where {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--ink-2);
}

/* ---- Doctors page -------------------------------------------------------------------- */

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--violet);
}

.doc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.doc-name {
  margin: 0;
}

.doc-name a {
  color: var(--ink);
  text-decoration: none;
}

.doc-name a:hover {
  text-decoration: underline;
}

.doc-role {
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 0.2rem;
}

.doc-facts {
  margin: 0.6rem 0 0;
  display: grid;
  gap: 0.2rem 1.5rem;
  font-size: 1rem;
}

.doc-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.doc-facts dt {
  color: var(--ink-2);
}

.doc-facts dt::after {
  content: ":";
}

.doc-facts dd {
  margin: 0;
  font-weight: 700;
}

.doc-facts-wide {
  font-size: 1.15rem;
}

.doc-head-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
}

.doc-head h1 {
  margin-bottom: 0.2rem;
}

.doc-head .lede {
  margin-bottom: 0.3rem;
  font-weight: 700;
  color: var(--violet);
}

.doc-today {
  margin-top: 0.6rem;
  font-weight: 700;
}

.portrait {
  width: 8rem;
  height: auto;
  border: 4px double var(--violet);
}

.degree-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  border-top: 2px solid var(--violet);
}

.degree-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

/* ---- Emergency note ------------------------------------------------------------------ */

.em-note {
  border: 2px solid var(--red);
  border-left-width: 8px;
  background: var(--red-tint);
  padding: 1rem 1.1rem;
  margin: 1.25rem 0;
  border-radius: 4px;
}

.em-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  color: var(--red);
}

.em-note p {
  font-size: 1.1rem;
}

.em-local {
  font-family: var(--serif);
}

.em-numbers {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.em-num {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
}

.em-num .num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--red);
  min-width: 3.5rem;
}

.em-compact {
  padding: 0.8rem 1rem;
}

.em-compact .em-title {
  font-size: 1.15rem;
}

.em-compact p {
  font-size: 1rem;
}

.em-compact .em-numbers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.em-compact .em-num {
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.em-compact .em-num .num {
  font-size: 1.35rem;
  min-width: 0;
}

.em-clinic {
  border-color: var(--violet);
}

.em-clinic .num {
  color: var(--violet);
  font-size: 1.2rem;
}

/* ---- Appointment form page ----------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.form-main {
  max-width: 40rem;
}

.request-note {
  border: 2px solid var(--violet);
  background: var(--tint);
  padding: 0.8rem 1rem;
  border-radius: 4px;
  font-size: 1.1rem;
}

.privacy-box {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 1rem;
}

.privacy-box h2 {
  font-size: 1.25rem;
}

.form-aside {
  font-size: 1rem;
}

.aside-title {
  font-size: 1.4rem;
}

.aside-fact {
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
}

.sent-status {
  display: inline-block;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--violet);
  border: 2px solid var(--violet);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
}

.notice-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.notice-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

/* ---- Long text ----------------------------------------------------------------------- */

.prose section {
  margin-bottom: 1.75rem;
}

.prose h2 {
  font-size: 1.5rem;
}