/* AuxaOne: the few things only the WordPress build needs. Everything else is css/site.css,
   shared with the static site. */

/* Logged in, WordPress's admin bar sits over the top of the page; the masthead moves
   down under it. Visitors never see this. */
.admin-bar .masthead { top: 32px; }
@media (max-width: 900px) {
  .admin-bar .masthead nav { top: calc(var(--head) + 32px); }
}
@media (max-width: 782px) {
  .admin-bar .masthead { top: 46px; }
  .admin-bar .masthead nav { top: calc(var(--head) + 46px); }
}

/* The phone number, once one is set in the Customizer: the address's smaller sibling. */
.phone-line a {
  font: 500 clamp(20px, 1.9vw, 26px)/1.2 var(--serif); color: #fff; text-decoration: none;
  background: linear-gradient(var(--gold-lt), var(--gold-lt)) 0 100% / 0 1px no-repeat;
  transition: background-size .45s cubic-bezier(.7, 0, .2, 1);
}
.phone-line a:hover { background-size: 100% 1px; }

/* The privacy link in the footer's micro line: same register, gold on hover like the nav. */
.foot-meta a {
  color: inherit; text-decoration: none;
  background: linear-gradient(var(--gold-lt), var(--gold-lt)) 0 100% / 0 1px no-repeat;
  transition: color .25s, background-size .4s cubic-bezier(.7, 0, .2, 1);
}
.foot-meta a:hover { color: #fff; background-size: 100% 1px; }

/* ---------- ordinary pages (index.php) ---------- */
/* One ivory band between the navy masthead and the navy footer. Same display face, same
   flush-left headline, same hairline register as the front page. */
.page-band {
  padding-top: calc(var(--head) + clamp(56px, 7vw, 110px));
  min-height: 72vh;
}
.page-article { max-width: 820px; }
.page-article + .page-article { margin-top: var(--band); padding-top: var(--band); border-top: 1px solid var(--line-ivory); }
.page-title {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font: 500 var(--t-heading-lg)/.96 var(--serif); letter-spacing: -.016em; color: var(--navy);
}
.page-content { font-size: var(--t-body-lg); line-height: 1.6; color: var(--slate); }
.page-content > * { max-width: 64ch; }
.page-content > :first-child { margin-top: 0; }
.page-content p, .page-content ul, .page-content ol { margin: 0 0 1.1em; }
.page-content h2, .page-content h3, .page-content h4 {
  margin: 1.8em 0 .55em; font: 500 var(--t-heading)/1.2 var(--serif); color: var(--navy);
}
.page-content h3 { font-size: var(--t-heading-sm); }
.page-content h4 { font-size: var(--t-subheading); }
.page-content a:not(.btn) {
  color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.page-content img { max-width: 100%; height: auto; }
.page-content hr { border: 0; border-top: 1px solid var(--line-ivory); margin: 2em 0; }
.page-content blockquote { margin: 1.4em 0; padding-left: var(--s24); border-left: 1px solid var(--gold); font: 500 var(--t-heading-sm)/1.3 var(--serif); color: var(--navy); }
/* The front page never puts a button on ivory, so the system's ivory-filled button would
   vanish into this band. Here it takes the inverse: navy fill, flipping to ivory on hover. */
.page-content .btn { margin-top: var(--s10); background: var(--navy); color: var(--ivory); }
.page-content .btn:hover, .page-content .btn:focus-visible { background: var(--ivory); color: var(--navy); border-color: var(--navy); }