/* ============================================================================
   The header, the menu and the footer: the parts that are the same on every
   page. Loaded after base.css and before the page's own stylesheet.
   ============================================================================ */

/* ---------- Header ---------- */
/* The header sits over the hero photograph on the home page and on the maroon
   band on every other page, so its type is white either way and the rule that
   colours it lives here rather than in a page stylesheet. */
.site-header{
  position:relative;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:40px;padding:28px var(--gutter-wide);
  animation:fbcDrop .9s var(--ease) both;
}
.site-header__logo{display:block}
.site-header__logo:hover{opacity:.85}
.site-header__logo img{animation:fbcFade 1.1s ease .1s both;height:112px;width:auto;display:block}

.site-nav{
  display:flex;align-items:center;gap:34px;font-family:var(--label);
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.site-nav a{display:inline-flex;align-items:center;min-height:24px;color:#fff;padding-bottom:4px;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--tan)}

/* The links arrive one after another. The delay is per position rather than an
   inline style on each link, so a link added in CloudCannon joins the run
   without anybody setting a number. */
.site-nav a:nth-child(1){animation:fbcUp .7s var(--ease) .45s both}
.site-nav a:nth-child(2){animation:fbcUp .7s var(--ease) .52s both}
.site-nav a:nth-child(3){animation:fbcUp .7s var(--ease) .59s both}
.site-nav a:nth-child(4){animation:fbcUp .7s var(--ease) .66s both}
.site-nav a:nth-child(5){animation:fbcUp .7s var(--ease) .73s both}
.site-nav a:nth-child(6){animation:fbcUp .7s var(--ease) .8s both}
.site-nav a:nth-child(7){animation:fbcUp .7s var(--ease) .87s both}

/* The Give link is a button rather than a link, and does not join the run. */
.site-nav__cta{
  padding:14px 28px;background:var(--maroon-deep);color:#fff;
  letter-spacing:.16em;border-bottom:0;animation:none!important;
}
.site-nav__cta:hover{background:#fff;color:var(--maroon-deep);border-bottom-color:transparent}

/* Every page but the home page opens on a maroon band rather than a
   photograph, so the header needs a ground of its own to sit on. */
.page-top{background:var(--clay)}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--paper);color:var(--ink);font-family:var(--label);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.28);
}
.footer-top{display:grid;grid-template-columns:1.62fr 1fr;align-items:stretch}
.footer-main{
  padding:58px 48px 50px;display:grid;grid-template-columns:1fr .84fr;
  gap:44px;align-items:start;
}
.footer-logo{display:block}
.footer-logo:hover{opacity:.85}
.footer-logo img{height:74px;width:auto;display:block}
.footer-blurb{margin:26px 0 0;font-size:16px;line-height:1.62;color:var(--body);max-width:32ch}
.footer-contact{display:flex;flex-direction:column;gap:6px;margin-top:26px}
.footer-contact address{font-style:normal;font-size:17px;line-height:1.6;color:var(--ink)}
.footer-contact a{display:inline-flex;align-items:center;min-height:24px;font-size:17px;font-weight:400;color:var(--ink)}
.footer-contact a:hover{color:var(--maroon)}
.footer-social{display:flex;gap:20px;margin-top:24px}
.footer-social a{display:flex;color:var(--ink)}
.footer-social a:hover{color:var(--maroon)}

.footer-links__title{
  display:block;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--maroon);margin-bottom:12px;
}
.footer-links__list{display:flex;flex-direction:column}
.footer-links__list a{
  padding:12px 0;border-bottom:1px solid rgba(27,23,23,.1);
  border-left:2px solid transparent;font-size:19px;font-weight:500;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
}
.footer-links__list a:last-child{border-bottom:0}
.footer-links__list a:hover{color:var(--maroon);border-left-color:var(--maroon);padding-left:12px}

/* The sign-up card. Its boxes are not wired to anything yet: see "Still to do"
   in the README. */
.footer-signup{padding:44px 40px 40px 8px}
.footer-signup__card{height:100%;padding:40px 36px;background:var(--maroon);color:#fff}
.footer-signup__card h2{
  font-size:44px;line-height:.96;font-weight:800;letter-spacing:-.032em;
  color:#fff;max-width:11ch;
}
.footer-signup__card p{margin-top:16px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.84)}
.footer-signup__card label{display:block;margin-top:24px;font-size:14px;font-weight:500;color:rgba(255,255,255,.9)}
.footer-signup__card input{
  margin-top:9px;width:100%;padding:15px;border:1px solid rgba(255,255,255,.34);
  background:#8A2626;color:#fff;font-family:var(--label);font-size:15px;
}
.footer-signup__card button{
  margin-top:14px;width:100%;padding:16px;border:0;background:#fff;color:var(--maroon);
  font-family:var(--label);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:background .22s ease,color .22s ease;
}
.footer-signup__card button:hover{background:var(--ink);color:#fff}

/* The band of service times, with the visit card cut into the left of it. */
.footer-band{background:var(--maroon);color:#fff;display:flex;align-items:stretch}
.footer-visit{flex:none;display:flex;align-items:center;gap:32px;padding:30px 52px;background:#fff;color:var(--maroon)}
.footer-visit:hover{background:var(--brown);color:#fff}
.footer-visit__copy{display:flex;flex-direction:column;line-height:1.2}
.footer-visit__kicker{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}
.footer-visit__title{margin-top:9px;font-family:var(--display);font-size:40px;letter-spacing:.005em;text-transform:uppercase}
.footer-visit__arrow{font-size:34px}

.footer-times{flex:1;display:flex;align-items:flex-end;justify-content:space-around;padding:30px 48px 34px 40px}
.footer-time{display:flex;align-items:flex-end;gap:18px}
.footer-time + .footer-time{padding:0 26px;border-left:1px solid #9A4444}
.footer-time__label{font-family:var(--display);font-size:15px;letter-spacing:.11em;text-transform:uppercase;color:#fff;white-space:nowrap}
.footer-time__value{font-family:var(--display);font-size:40px;letter-spacing:.005em;color:#fff;white-space:nowrap;margin-top:8px}
.footer-time__note{padding:9px 13px 11px;background:#fff;white-space:nowrap}
.footer-time__note-label{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.footer-time__note-value{margin-top:5px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--maroon)}

.footer-legal{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:18px 48px;background:#fff;border-top:1px solid var(--line-dark);
}
.footer-legal p{font-size:12.5px;color:var(--muted)}

/* The design credit, the studio's kit from hdco-credit/, with the church's own
   four blocks beside it like its logo. Pointed at, the blocks sweep across in
   turn, maroon, tan, brown, maroon, and leave the Maximin Design lockup. The
   kit's stylesheet loads last, so these rules carry the footer's class to win.
   The tan is the logo's. The credit stops short of the accessibility button,
   which stays in the bottom-right corner. */
.site-footer .hdc-credit{position:relative;isolation:isolate;margin-right:44px;padding-left:34px}
.site-footer .hdc-credit::before{content:"";position:absolute;left:0;top:50%;width:24px;height:26px;margin-top:-13px;border-radius:2px;background:linear-gradient(var(--maroon),var(--maroon)) 0 0/10px 11px no-repeat,linear-gradient(#B4805C,#B4805C) 13px 0/11px 11px no-repeat,linear-gradient(var(--brown),var(--brown)) 0 14px/10px 12px no-repeat,linear-gradient(var(--maroon),var(--maroon)) 13px 14px/11px 12px no-repeat}
.site-footer .hdc-credit__copy{position:relative;overflow:hidden}
.site-footer .hdc-credit__copy span{color:var(--muted)}
.site-footer .hdc-credit__copy strong{background:none;color:var(--maroon);-webkit-text-fill-color:var(--maroon)}
.site-footer .hdc-credit__copy::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--maroon) 0 25%,#B4805C 25% 50%,var(--brown) 50% 75%,var(--maroon) 75%);transform:scaleX(0);transform-origin:left}
.site-footer .hdc-credit .mx-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
.site-footer .hdc-credit .mx-mark{display:block;line-height:0}
.site-footer .hdc-credit .mx-mark svg{display:block;width:auto;height:17px}
.site-footer .hdc-credit__copy>*{transition:opacity .01s}
.site-footer .hdc-credit:is(:hover,:focus-visible) .hdc-credit__copy::before{animation:credit-blocks .8s cubic-bezier(.65,0,.35,1) forwards}
.site-footer .hdc-credit:is(:hover,:focus-visible) .hdc-credit__copy>:not(.mx-in){opacity:0;transition-delay:.3s}
.site-footer .hdc-credit:is(:hover,:focus-visible) .mx-in{opacity:1;transition-delay:.38s}
@keyframes credit-blocks{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@media(prefers-reduced-motion:reduce){.site-footer .hdc-credit__copy::before{display:none}.site-footer .hdc-credit__copy>*{transition:none}}