@import url("fonts/fonts.css");

/* Mesmos tokens do site/piloto: Oswald, EB Garamond, grafite e dourado. */
.ipl-liturgia,.ipl-calendar,.ipl-empty {
  --ipl-ink:#343642; --ipl-gold:#866523; --ipl-line:#deddd9;
  --ipl-heading:'Oswald','Arial Narrow',sans-serif;
  --ipl-body:'EB Garamond',Georgia,serif;
  box-sizing:border-box; width:100%; max-width:760px; margin-inline:auto;
  color:var(--ipl-ink);
}
.ipl-liturgia *, .ipl-calendar * {box-sizing:border-box}
.ipl-calendar {
  display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap;
  margin-block:24px 0; padding-bottom:18px; border-bottom:1px solid var(--ipl-line);
}
.ipl-calendar form {display:flex;align-items:flex-end;gap:8px;margin:0;flex:1}
.ipl-calendar label {
  display:grid;gap:5px; color:var(--ipl-ink);
  font:400 11px/1.2 var(--ipl-heading);letter-spacing:.08em;text-transform:uppercase;
}
.ipl-calendar input {
  width:156px;max-width:100%;height:40px;padding:6px 10px;
  font:400 14px/1.2 var(--ipl-heading);letter-spacing:.02em;
  border:1px solid var(--ipl-line);border-radius:0;background:white;color:var(--ipl-ink);
}
.ipl-calendar button,.ipl-calendar>a {
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:8px 14px;margin:0;border:1px solid var(--ipl-line);border-radius:0;
  background:transparent;color:var(--ipl-ink);text-decoration:none;
  font:400 12px/1 var(--ipl-heading);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.ipl-calendar button {background:var(--ipl-ink);border-color:var(--ipl-ink);color:white}
.ipl-calendar>a:not(.ipl-today){width:40px;padding:0;font-family:Arial,sans-serif;font-size:18px}
.ipl-calendar .ipl-today {border-color:transparent;color:var(--ipl-gold)}
.ipl-calendar a:hover {background:#f5f5f2}
.ipl-calendar button:hover {background:#53525a}
.ipl-liturgia {--ipl-accent:#52634c;margin-block:0 40px;font:400 21px/1.55 var(--ipl-body);letter-spacing:.01em}
.ipl-liturgia header {padding:28px 0 22px}
.ipl-liturgia .ipl-kicker {margin:0 0 10px;font:400 12px/1.3 var(--ipl-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--ipl-gold)}
.ipl-liturgia time {font:italic 18px/1.4 var(--ipl-body);color:#65656a}
.ipl-liturgia h2 {font:400 33.44px/1.22 var(--ipl-heading);letter-spacing:.02em;text-transform:uppercase;margin:10px 0 12px;max-width:650px}
.ipl-liturgia .ipl-meta {display:flex;align-items:center;gap:8px;margin:0;font:400 12px/1.4 var(--ipl-heading);letter-spacing:.04em;color:#65656a}
.ipl-liturgia .ipl-meta::before {content:'';width:7px;height:7px;background:var(--ipl-accent);border-radius:50%}
.ipl-roxo{--ipl-accent:#65426e}.ipl-vermelho{--ipl-accent:#9a3434}.ipl-branco{--ipl-accent:#a68b42}.ipl-rosa{--ipl-accent:#a75075}
.ipl-tabs {display:flex;flex-wrap:wrap;gap:0 22px;margin:0 0 28px;border-bottom:1px solid var(--ipl-line)}
.ipl-tabs button {
  position:relative;min-height:44px;padding:10px 0;margin:0 0 -1px;
  border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;
  font:400 13px/1.3 var(--ipl-heading);letter-spacing:.035em;color:#65656a;cursor:pointer;
}
.ipl-tabs button[aria-selected=true] {border-bottom-color:var(--ipl-gold);color:var(--ipl-ink)}
.ipl-tabs button:hover {color:var(--ipl-gold)}
.ipl-liturgia h3 {margin:0 0 20px;font:400 22.88px/1.46 var(--ipl-heading);letter-spacing:.02em;color:var(--ipl-ink)}
.ipl-liturgia p {margin:0 0 1em}
.ipl-liturgia .ipl-reading {white-space:pre-line;overflow-wrap:anywhere}
.ipl-liturgia .ipl-prose {white-space:normal;font:400 21px/1.6 var(--ipl-body);letter-spacing:.01em}
.ipl-prose .ipl-reference {font:400 13px/1.4 var(--ipl-heading);letter-spacing:.035em;color:var(--ipl-gold);margin-top:-10px}
.ipl-prose .ipl-verse {font:400 .65em/0 var(--ipl-body);vertical-align:super;color:var(--ipl-gold);margin-right:.12em}
.ipl-text [hidden] {display:none!important}
.ipl-text [role=tabpanel]:focus {outline:none}
.ipl-text [role=tabpanel]:focus-visible,.ipl-tabs button:focus-visible,.ipl-calendar :focus-visible {outline:2px solid #b18430;outline-offset:4px}
.ipl-empty {padding:28px 0;font:400 21px/1.5 var(--ipl-body)}
@media(max-width:600px) {
 .ipl-calendar {gap:6px;margin-top:16px;padding-bottom:16px}
 .ipl-calendar form {order:-1;flex-basis:100%;justify-content:space-between}
 .ipl-calendar label {flex:1}
 .ipl-calendar input {width:100%}
 .ipl-calendar .ipl-today {margin-left:auto}
 .ipl-liturgia header {padding:22px 0 18px}
 .ipl-liturgia h2 {font-size:28px}
 .ipl-tabs {gap:0 17px;margin-bottom:24px}
 .ipl-tabs button {font-size:12px;min-height:44px}
 .ipl-liturgia .ipl-prose {font-size:20px;line-height:1.55}
 .ipl-liturgia h3 {font-size:21px;margin-bottom:16px}
}
.ipl-form-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:760px;margin:18px auto 0;font:400 12px/1.4 'Oswald','Arial Narrow',sans-serif;color:#343642}
.ipl-form-picker label{text-transform:uppercase;letter-spacing:.06em}
.ipl-form-picker select,.ipl-form-picker button{min-height:40px;border:1px solid #deddd9;border-radius:0;padding:8px 10px;background:white;color:#343642;font:inherit}
.ipl-form-picker select{flex:1;min-width:130px;max-width:260px}
.ipl-form-picker button{background:#343642;color:white;cursor:pointer}
.ipl-form-picker :focus-visible{outline:2px solid #b18430;outline-offset:4px}
.ipl-saint{border-top:1px solid var(--ipl-line);margin-top:18px;padding-top:14px}
.ipl-saint summary{display:flex;align-items:baseline;gap:10px;list-style:none;cursor:pointer;width:fit-content;max-width:100%}
.ipl-saint summary::-webkit-details-marker{display:none}
.ipl-saint-label{font:400 11px/1.5 var(--ipl-heading);letter-spacing:.06em;text-transform:uppercase;color:#65656a;white-space:nowrap}
.ipl-saint-name{font:400 20px/1.4 var(--ipl-body);color:var(--ipl-gold);text-decoration:underline;text-decoration-color:rgb(134 101 35 / 35%);text-underline-offset:.18em}
.ipl-saint summary::after{content:'+';font:400 17px/1 var(--ipl-heading);color:var(--ipl-gold)}
.ipl-saint[open] summary::after{content:'−'}
.ipl-saint .ipl-saint-bio{max-width:680px;margin-top:12px;font:400 19px/1.5 var(--ipl-body);letter-spacing:.01em}
.ipl-saint .ipl-saint-bio p{margin:0}
.ipl-saint summary:focus-visible{outline:2px solid #b18430;outline-offset:4px}
@media(max-width:600px){.ipl-saint summary{flex-wrap:wrap;gap:3px 8px}.ipl-saint-label{flex-basis:100%}.ipl-saint-name{font-size:19px}.ipl-saint .ipl-saint-bio{font-size:18px}}