/*
 * components.css
 * ReyBelen Standalone Theme — Reusable Interface Patterns
 *
 * Authority: REYBELEN-COMPONENT-BLUEPRINT-SYSTEM.md §01 (Class 3 Inline Components)
 *            REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §02 (Typography), §03 (Color)
 *            REYBELEN-ARCHITECTURAL-AMENDMENTS.md AM-08 (FAQ Item Class 3 confirmed)
 *
 * Owns: buttons, section labels, stat number base, pull quotes, inline blockquotes,
 *       highlight spans, FAQ items, CTA strip.
 *
 * Does not own: insight cards (archive.css), newsletter layout (sections.css),
 *               proof item specifics (sections.css), entity block (page.css),
 *               @media rules (responsive.css).
 *
 * No section layout rules. No hero rules. No nav rules. No footer rules.
 * No gradients. No icons. No secondary accent colors. No GeneratePress selectors.
 */


/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Button: Base ────────────────────────────────────────────────────────── */

/*
 * DM Mono — the precision instrument for actions and direction.
 * Weight 500: maximum available DM Mono weight (400 and 500 loaded;
 * spec references 600 but DM Mono 600 is not in the font set).
 * Border-radius: 2px maximum — the design language is sharp.
 */

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rb-font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 14px 28px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}


/* ── Button: Primary ─────────────────────────────────────────────────────── */

/*
 * Cognac background. White text.
 * Hover: darken to #8B4526 (CBS §02 specified value — 10% darker than cognac).
 * #8B4526 is a component-level hover value, not a token.
 * --rb-cognac-lt is reserved for hero/dark-surface display emphasis only.
 */

.rb-btn--primary {
  background-color: var(--rb-cognac);
  color: #FFFFFF;
  border: 1px solid transparent;
}

.rb-btn--primary:hover {
  background-color: #8B4526;
  color: #FFFFFF;
}


/* ── Button: Ghost ───────────────────────────────────────────────────────── */

/*
 * For dark surfaces only. White border at 40% opacity, white text.
 * Border opacity increases on hover — no color change, no background.
 * Ghost buttons do not appear on light surfaces.
 */

.rb-btn--ghost {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.40);
}

.rb-btn--ghost:hover {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.72);
}


/* ── Button: Large Variant ───────────────────────────────────────────────── */

/*
 * Used by the homepage CTA section (closing conversion moment).
 * Larger padding and 12px font size — maximum button authority.
 * One large button per dark section. It is the only cognac object visible.
 */

.rb-btn--large {
  font-size: 12px;
  padding: 16px 36px;
}


/* ══════════════════════════════════════════════════════════════════════════
   SECTION LABEL (EYEBROW)
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Label ───────────────────────────────────────────────────────────────── */

/*
 * DM Mono — classifies, names, orients. Never narrates.
 * Cognac on both light and dark surfaces.
 * Always appears above its heading, never below (VSA §02.3).
 * margin-bottom creates the 24px eyebrow-to-headline gap (VSA §06.4).
 */

.rb-label {
  display: block;
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--rb-cognac);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-3);
}

.rb-label--light {
  color: rgba(255, 255, 255, 0.45);
}


/* ══════════════════════════════════════════════════════════════════════════
   STAT NUMBER BASE
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Stat Number ─────────────────────────────────────────────────────────── */

/*
 * Base class only. Section-specific sizing is set in sections.css.
 * Fraunces 300 at display scale — same weight as hero headline.
 * Color and size are context-dependent: white on dark, --rb-ink on light.
 */

.rb-stat-number {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   PULL QUOTE
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Pull Quote ──────────────────────────────────────────────────────────── */

/*
 * Extracts a sentence from body copy for visual texture and pacing.
 * Fraunces 300 italic — editorial distinction, not generic emphasis.
 * Cognac left border is the visual anchor. Generous margin creates breathing room.
 * Used within article body (light surface). Not a dark-surface component.
 */

.rb-pull {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--rb-ink);
  border-left: 3px solid var(--rb-cognac);
  padding-left: var(--sp-3);
  margin: 40px 0;
  max-width: 600px;
}


/* ══════════════════════════════════════════════════════════════════════════
   INLINE BLOCKQUOTE
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Inline Blockquote ───────────────────────────────────────────────────── */

/*
 * For attribution quotes within article body content.
 * Fraunces 300 italic — the editorial voice register.
 * Navy color distinguishes from body copy without using grey.
 * No decorative quotation mark characters.
 */

.rb-blockquote {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rb-navy);
  margin: 0;
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   HIGHLIGHT SPAN
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Highlight Span ([hl] shortcode output) ──────────────────────────────── */

/*
 * Wraps inline text for an animated cognac underline draw.
 * The ::after pseudo-element starts at width 0.
 * hero.js IntersectionObserver adds .rb-hl--drawn when the span enters viewport.
 * .rb-hl--drawn::after sets width to 100%, triggering the draw transition.
 * Each span triggers once (observer.unobserve after firing).
 */

.rb-hl {
  position: relative;
  display: inline;
}

.rb-hl::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--rb-cognac);
  transition: width 600ms ease;
}

.rb-hl--drawn::after {
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════
   FAQ ITEM
   ══════════════════════════════════════════════════════════════════════════ */


/* ── FAQ Item: Container ─────────────────────────────────────────────────── */

/*
 * Class 3 Inline Component — called from within the Class 2 FAQ Section.
 * AM-08 confirms this class belongs in components.css.
 * All FAQ items are visible (no expand/collapse in Phase 05).
 * Always on light surface. Never dark background variant.
 */

.rb-faq-item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rb-border);
}

.rb-faq-item:first-child {
  border-top: 1px solid var(--rb-border);
}


/* ── FAQ Item: Number ────────────────────────────────────────────────────── */

/*
 * DM Mono sequence marker — 01, 02, 03... pattern.
 * Cognac: classificatory function (VSA §03.3 — accent appears at labels).
 * Appears above the question, not inline with it.
 */

.rb-faq-item__number {
  display: block;
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--rb-cognac);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-1);
}


/* ── FAQ Item: Question ──────────────────────────────────────────────────── */

/*
 * T3 scale — subsection headline weight (VSA §02.2, CBS §07.7).
 * Fraunces 300. Questions are typographic statements, not labels.
 * Near-black on light surface — never grey.
 */

.rb-faq-item__question {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-2);
}


/* ── FAQ Item: Answer ────────────────────────────────────────────────────── */

/*
 * System sans — body reading register.
 * --rb-ink: near-black. Never --rb-text-meta on paragraph reading text.
 * VSA §02.4: grey body text is permanently prohibited on light surfaces.
 */

.rb-faq-item__answer {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
}

.rb-faq-item__answer p {
  margin: 0;
  padding: 0;
}

.rb-faq-item__answer p + p {
  margin-top: var(--sp-3);
}


/* ══════════════════════════════════════════════════════════════════════════
   CTA STRIP
   ══════════════════════════════════════════════════════════════════════════ */


/* ── CTA Strip: Shell ────────────────────────────────────────────────────── */

/*
 * Interior page closing conversion anchor — not a full section.
 * Dark navy strip. 48px padding (--sp-6) — strip scale, not section scale.
 * Appears above the footer on all interior pages (About, Work, articles).
 * Contact page is exempt — the form is the CTA (CBS §18).
 */

.rb-cta-strip {
  width: 100%;
  background-color: var(--rb-navy);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}


/* ── CTA Strip: Inner ────────────────────────────────────────────────────── */

/*
 * Flex row: heading left, button right.
 * space-between alignment. gap maintains breathing room if wrapping occurs.
 */

.rb-cta-strip__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}


/* ── CTA Strip: Heading ──────────────────────────────────────────────────── */

/*
 * T3 scale — shorter than a section headline; carries strip-level authority.
 * Fraunces 300. White on dark surface.
 */

.rb-cta-strip__heading {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   404 / NO-RESULTS NAVIGATION OPTIONS
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Options Grid ────────────────────────────────────────────────────────── */

/*
 * Used by 404.php and search.php (no-results state).
 * Always on dark navy surface (inside .rb-404 or .rb-search-noresults sections).
 * Four-column grid on wide viewports; two-column on medium; single on mobile.
 * Responsive breakpoints handled in responsive.css.
 */

.rb-fourofour-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}


/* ── Option: Item ────────────────────────────────────────────────────────── */

/*
 * Each navigation destination. Anchor — the whole block is clickable.
 * Left cognac border — classification anchor on dark surface.
 * No background tint: dark surface is already the container.
 * Transition on border-color creates a hover signal without motion.
 */

.rb-fourofour-option {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--rb-cognac);
  text-decoration: none;
  transition: border-color 150ms ease;
}

.rb-fourofour-option:hover {
  border-left-color: var(--rb-cognac-lt);
}


/* ── Option: Label ───────────────────────────────────────────────────────── */

/*
 * Destination name. System sans 500. White on dark surface.
 */

.rb-fourofour-option__label {
  font-family: var(--rb-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}


/* ── Option: Description ─────────────────────────────────────────────────── */

/*
 * Supporting sentence. System sans 400.
 * rgba(255,255,255,0.62) — subordinate to label.
 */

.rb-fourofour-option__desc {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}


/* ── Option: Link Text ───────────────────────────────────────────────────── */

/*
 * Directional text — "Read the observations →" etc.
 * DM Mono 11px uppercase: action register matches button typography.
 * Cognac: action affordance signal — same as labels and CTAs.
 */

.rb-fourofour-option__link {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--rb-cognac);
  margin-top: var(--sp-1);
}


/* ══════════════════════════════════════════════════════════════════════════
   COGNAC RULE MOTIF
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Cognac Rule ─────────────────────────────────────────────────────────── */

/*
 * AM-13 §13.7: Recurring cognac rule motif.
 * Short horizontal mark — not a divider, not a border, not a separator.
 * 48px width. 2px height. Always --rb-cognac.
 * Appears sparingly: above observation statements, above entity block name,
 * as optional pull quote punctuation. Never full-width. Never decorative.
 * aria-hidden="true" required on the element — visual signal only, no semantics.
 */

.rb-rule--cognac {
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--rb-cognac);
  margin: 0;
  padding: 0;
  border: none;
  flex-shrink: 0;
}