@charset "UTF-8";
/* ==========================================================================
   SHARED CHROME — the homepage's nav and footer, for the imported pages.

   These twelve pages came from a separate site with their own header and
   footer. They now wear the same ones as rhondazstyle.com, so moving between
   the homepage and any of them feels like one site rather than two.

   Every rule below is copied verbatim from assets/css/rhondazstyle.css. If
   the homepage chrome changes there, change it here too — or better, delete
   this file and point these pages at that stylesheet once the token clash
   described next is resolved.

   WHY THE TOKENS ARE SCOPED
   Both stylesheets define a --teal, and they are different colours:
   css/styles.css uses #7FB1B1 (the light brand teal, for fills), while
   assets/css/rhondazstyle.css uses #46767A (the deep twin, for text). If the
   design-system tokens were declared on :root here, they would land after
   styles.css and silently repaint every var(--teal) in the page body.
   So they are declared on .rz-chrome instead. Custom properties inherit, so
   the nav and footer resolve them correctly and nothing leaks past.
   ========================================================================== */

.rz-chrome{
  --teal:#46767A;
  --teal-dk:#3F7561;
  --teal-deep:#2A3D3F;
  --rasp:#C4256F;
  --peach:#F7C6A4;
  --mint:#E8FFF8;
  --mint2:#EDF7F2;
  --ink:#33413f;
  font-family:'Montserrat',sans-serif;
  /* styles.css sets body{line-height:1.7;color:#333} and the chrome inherited
     both, which made this nav 87px tall where the homepage's is 83px. The
     homepage's body sets neither, so the chrome states the values it would
     have inherited there rather than the ones it inherits here. */
  line-height:normal;
  color:var(--ink);
}
.rz-chrome a{text-decoration:none;color:inherit;}

/* ---------- nav ---------- */
nav.rz-chrome{display:flex;align-items:center;justify-content:space-between;padding:22px 70px;border-bottom:1px solid #eef4f1;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);z-index:10;}
.rz-chrome .logo{display:flex;align-items:center;gap:11px;}
.rz-chrome .logo .rs{width:38px;height:38px;border-radius:50%;background:var(--rasp);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
.rz-chrome .logo .nm{font-weight:700;color:var(--teal);font-size:16px;line-height:1;}
.rz-chrome .logo .nm small{display:block;font-weight:600;color:#8aa;font-size:8px;letter-spacing:2px;margin-top:3px;}
.rz-chrome .navlinks{display:flex;gap:26px;font-size:13px;color:#4a5a5a;font-weight:500;align-items:center;}
.rz-chrome .navlinks .cta{background:var(--rasp);color:#fff;padding:11px 20px;border-radius:24px;font-weight:600;font-size:12px;}
/* Secondary nav link. Reads as plain text — only the Prayer Book is
   highlighted — but it still carries .cta so it survives the <1000px rule
   that hides every link which is not one, which would otherwise leave a phone
   with nothing in the nav but the paid product. */
.rz-chrome .navlinks .cta--plain{background:transparent;color:#4a5a5a;border:0;padding:0;border-radius:0;font-weight:500;font-size:13px;}
.rz-chrome .navlinks a{position:relative;}
/* a not-yet-live destination carries a dot, never a lie */
.rz-chrome .navlinks a.soon::after{content:"";position:absolute;top:-2px;right:-9px;width:5px;height:5px;border-radius:50%;background:var(--peach);}
.rz-chrome .navlinks a:not(.cta):hover{color:var(--rasp);}
.rz-chrome .navlinks .cta:hover{background:#a81c5c;}
.rz-chrome .navlinks .cta--plain:hover{background:transparent;color:var(--rasp);}

/* ---------- footer ---------- */
footer.rz-chrome{background:var(--teal-deep);color:#cfe0dd;padding:40px 70px;display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.rz-chrome .cross{background:rgba(255,255,255,.08);border:1px solid rgba(247,198,164,.4);border-radius:26px;padding:12px 22px;color:#fff;font-weight:600;}
.rz-chrome .cross span{color:var(--peach);}
.rz-chrome .cross:hover{background:rgba(255,255,255,.16);}
.rz-chrome .foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:12.5px;}
.rz-chrome .foot-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
/* Three labelled groups, copied from the homepage's footer. */
.rz-chrome .foot-group + .foot-group{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);}
.rz-chrome .foot-h{font-size:10px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase;color:#8aa7a3;margin-top:16px;}
.rz-chrome .foot-h + .foot-links{margin-top:7px;}
.rz-chrome .foot-links a[aria-current="page"]{color:var(--peach);font-weight:700;}
.rz-chrome .foot-triad{margin:20px 0 0;font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#93b0ab;}
.rz-chrome .footmantra{font-family:'Alex Brush',cursive;font-size:22px;color:var(--peach);margin-top:20px;}
.rz-chrome :focus-visible{outline-color:var(--peach);}

/* ---------- breakpoints ---------- */
/* The same two steps the homepage takes, at the same widths. The nav used to
   need a third at 1200px, tightening the gap and hiding two links, because it
   carried nine of them where the homepage carried four. It carries four now,
   so that step is gone with them. */
@media(max-width:1000px){
  nav.rz-chrome{padding:16px 22px;}
  .rz-chrome .navlinks{gap:16px;}
  .rz-chrome .navlinks a:not(.cta){display:none;}
  .rz-chrome .foot-links{justify-content:center;}
  .rz-chrome .foot-h,.rz-chrome .foot-triad{text-align:center;}
  footer.rz-chrome{flex-direction:column;gap:16px;text-align:center;padding:30px 22px;}
}
/* Below 560px the two pills need 458px on one row inside a 390px box, so the
   nav folds: logo, then both pills centred beneath it. Same trade the
   homepage makes — a slightly taller header rather than truncated labels. */
@media(max-width:560px){
  nav.rz-chrome{flex-wrap:wrap;justify-content:center;row-gap:12px;}
  .rz-chrome .navlinks{width:100%;justify-content:center;gap:10px;}
  .rz-chrome .logo .nm small{display:none;}
  .rz-chrome .navlinks .cta{white-space:nowrap;padding:10px 16px;font-size:11.5px;}
  .rz-chrome .navlinks .cta--plain{padding:0;font-size:12.5px;}
}

/* ---------- print ---------- */
/* styles.css has a print block, but it hides .site-header/.site-footer — the
   class names these pages wore before they took the homepage's chrome. So the
   nav and footer printed on every sheet. The homepage drops both; so do these. */
@media print{
  nav.rz-chrome,footer.rz-chrome{display:none!important;}
}