/* Rentari signature header for public pages.
   - data-sig-bg="standard" is the everyday header: a pale lavender band with the dotted-roof corner mark
     (static/images/design/patterns, see DESIGN.md). .sig-corner puts the same mark in the top-right corner of
     a page that has no header band, such as articles.
   - Other data-sig-bg values are optional GPT backgrounds for special pages:
     journey, watercolor, neighbourhood, shapes.
   - Two-tone title: the key words in .sig-key take brand purple with the logo's roof line above them.
   - .sig-offset puts a lavender block shifted down and right behind a photo or card, the same shift as the icon set.
   - .sig-crumbs is the small uppercase breadcrumb. */

[data-sig-bg] { position:relative; isolation:isolate; overflow:hidden; }
[data-sig-bg]::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-repeat:no-repeat; }
:is([data-sig-bg="journey"], [data-sig-bg="neighbourhood"]) { background:var(--surface-aurora, #fff) !important; }
[data-sig-bg="standard"] { background:#F6F4FD !important; }
/* The standard mark is the compact dotted roofs in the top-right corner, sized like a small corner pattern.
   It only uses space that is already empty and never pushes the main content far:
   - desktop: a photo or image beside the title gets .sig-below and starts just below the mark;
   - phones: the breadcrumb row keeps clear of the mark, so the title already starts below it;
   - the calculator card keeps the mark on desktop; on phones the page corner beside its breadcrumb carries it. */
[data-sig-bg="standard"]::before, .sig-corner::before { background-image:url("/images/design/patterns/corner-compact.svg"); background-position:right 0 top 0; background-size:180px auto; }
.sig-corner { position:relative; isolation:isolate; }
.sig-corner::before { content:""; position:absolute; top:0; right:0; width:100%; height:86px; z-index:-1; pointer-events:none; background-repeat:no-repeat; }
@media (min-width: 900px) {
  .sig-below { margin-top:64px !important; align-self:start !important; }
  /* the illustration narrows by 96px so its height drops by the same 64px it moves down: the card keeps its height */
  .rc-guide-hero > img.sig-below { width:calc(100% - 96px) !important; height:auto !important; justify-self:end; }
  .sig-corner-phone-only::before { display:none; }
}
@media (max-width: 899.98px) {
  [data-sig-bg="standard"]::before, .sig-corner::before { background-size:104px auto; }
  .sig-corner::before { height:50px; }
  :is([data-sig-bg="standard"], .sig-corner) :is(.faq-crumbs, .sig-crumbs, .slp-crumbs, .res-breadcrumb, .rc-breadcrumb) { padding-right:96px; }
  /* phones: the calculator's mark moves from its card to the page corner beside the breadcrumb */
  .rc-guide-hero[data-sig-bg="standard"]::before { display:none; }
}
:is([data-sig-bg="watercolor"], [data-sig-bg="shapes"]) { background:#fff !important; }
[data-sig-bg="journey"]::before { background-image:url("/images/backgrounds/sig-journey.webp"); background-position:right top; background-size:auto 100%; opacity:.16; }
[data-sig-bg="watercolor"]::before { background-image:url("/images/backgrounds/sig-watercolor.webp"); background-position:right top; background-size:cover; }
[data-sig-bg="neighbourhood"]::before { background-image:url("/images/backgrounds/sig-neighbourhood.webp"); background-position:right bottom; background-size:auto 62%; opacity:.45; }
[data-sig-bg="shapes"]::before { background-image:url("/images/backgrounds/sig-shapes.webp"); background-position:right top; background-size:cover; }
@media (max-width: 899.98px) {
  [data-sig-bg="journey"]::before { background-size:auto 46%; opacity:.12; }
  [data-sig-bg="neighbourhood"]::before { background-size:auto 30%; opacity:.4; }
}

/* The key word keeps its own headroom for the roof, so a two-line title never lets the roof touch the line above. */
.sig-key { color:var(--brand-purple-ink, #6B48E0) !important; -webkit-text-fill-color:currentColor; background:none; position:relative; display:inline-block; padding-top:.34em; }
.sig-key::before { content:""; position:absolute; left:0; top:0; width:min(100%, 3.2em); height:.36em;
  background:url("/images/brand/rentari-roof-mark.png") left bottom / contain no-repeat; pointer-events:none; }

.sig-offset { box-shadow:10px 10px 0 0 #E2D7FB; }
.sig-offset-sm { box-shadow:6px 6px 0 0 #E2D7FB; }

.sig-crumbs { margin:0 0 14px; padding:0; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px 0;
  font-size:14px; font-weight:600; line-height:1.4; letter-spacing:.04em; text-transform:uppercase; color:var(--link-ink, #006CB4); }
.sig-crumbs a, .sig-crumbs [aria-current] { color:var(--link-ink, #006CB4); text-decoration:none; }
.sig-crumbs a:hover, .sig-crumbs a:focus-visible { text-decoration:underline; }
.sig-crumbs .sep { margin:0 8px; color:#94A3B8; }