/* WordPress-specific additions on top of the compiled design system (app.css). */

/* Admin bar offset for the fixed header. */
.admin-bar .rb-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .rb-header { top: 46px; } }

/* Skip link. */
.rb-skip { position: absolute; left: -9999px; top: 0; z-index: 60; }
.rb-skip:focus { left: 12px; top: 12px; background: var(--gold); color: var(--midnight); padding: .5rem 1rem; border-radius: .375rem; font-size: .875rem; }

/* WordPress core helpers. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption.wp-element-caption { font-size: .8125rem; color: var(--muted-foreground); margin-top: .5rem; }

/* [hidden] must win over utility display classes. */
[hidden] { display: none !important; }

/* Honeypot field. */
.rb-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/*
 * Readability: slightly stronger supporting copy on the light (ivory / paper) sections.
 * Overrides the design's lighter charcoal opacities and the muted grey used for labels,
 * help text and descriptions. Decorative 30-40% tints are left unchanged.
 */
:root { --muted-foreground: oklch(40% .012 258); }
.text-charcoal\/50 { color: color-mix(in oklab, var(--charcoal) 62%, transparent); }
.text-charcoal\/60 { color: color-mix(in oklab, var(--charcoal) 70%, transparent); }
.text-charcoal\/70 { color: color-mix(in oklab, var(--charcoal) 78%, transparent); }
.text-charcoal\/75 { color: color-mix(in oklab, var(--charcoal) 82%, transparent); }
.text-charcoal\/80 { color: color-mix(in oklab, var(--charcoal) 86%, transparent); }

/* Small gold labels (eyebrows, captions, fine print) on the light sections use a deeper gold so they
   stay readable; gold on the dark sections and large gold headings keep the brand gold. */
:is(:is(.eyebrow, .text-xs, .text-\[0\.5625rem\], .text-\[0\.625rem\], .text-\[0\.6875rem\], .text-\[0\.75rem\]).text-gold, :is(.text-xs, .text-\[0\.625rem\], .text-\[0\.6875rem\], .text-\[0\.75rem\]) .text-gold, .placeholder-note):not(:is(.on-dark, .bg-midnight, .bg-midnight\/60, .bg-midnight\/90, .bg-navy, .bg-navy\/70, .bg-navy\/95, .bg-navy-soft, .bg-navy-soft\/60, .bg-charcoal)):not(:is(.on-dark, .bg-midnight, .bg-midnight\/60, .bg-midnight\/90, .bg-navy, .bg-navy\/70, .bg-navy\/95, .bg-navy-soft, .bg-navy-soft\/60, .bg-charcoal) *) { color: color-mix(in oklab, var(--gold) 65%, var(--midnight)); }

/* Faintest supporting copy on the dark sections. */
.text-primary-foreground\/40 { color: color-mix(in oklab, var(--primary-foreground) 56%, transparent); }
.text-primary-foreground\/45 { color: color-mix(in oklab, var(--primary-foreground) 58%, transparent); }
.text-primary-foreground\/50 { color: color-mix(in oklab, var(--primary-foreground) 62%, transparent); }

/* FAQ: the question row gets a quiet underline for keyboard focus instead of a gold box around the
   whole row, and the answer has a little more room beneath the question. */
[data-rb-acc-trigger]:focus { outline: none; }
[data-rb-acc-trigger]:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .35em; }
.rb-faq-answer { padding-top: .25rem; }
.rb-faq-answer > * + * { margin-top: .75rem; }

/* "Placeholder example" label on design-example testimonials and case studies. */
.rb-placeholder-badge { display: inline-flex; align-items: center; gap: .375rem; border: 1px dashed color-mix(in oklab, var(--gold) 70%, transparent); border-radius: 999px; padding: .125rem .625rem; font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; color: color-mix(in oklab, var(--gold) 80%, black 20%); background: color-mix(in oklab, var(--gold) 8%, transparent); white-space: nowrap; }

/* Packages → client journey: second row of steps starts at the same left edge as the first. */
@media (min-width: 64rem) { .rb-journey > li:nth-child(4n+1) { padding-left: 0; } }