/*
Theme Name:   Hello Elementor Child — Restaurant Brokers
Theme URI:    https://virtualmind.services/
Description:  Child theme for the Restaurant Broker marketplace. Holds ONLY the design-token sheet and enqueues — all business logic lives in the plugin, all layout in Elementor Theme Builder. 
Author:       Restaurant Brokers
Template:     hello-elementor
Version:      1.3.0
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   THE RESTAURANT BROKERS — DESIGN TOKENS (single source of truth)
   Derived from the brand mark (#680B14 oxblood). Every component consumes
   these custom properties; no raw hex values outside this sheet.
   Contrast-validated 2026-07-18; brand/neutral values re-locked to the
   Phase 26.0 luxury palette 2026-08-13 (Near Black/Ivory/White/Muted
   Gold/Deep Burgundy/Charcoal) — see the Elementor Kit's Site Settings
   for the matching Global Colors (`primary`/`secondary`/`text`/`accent`
   plus custom `rb_ivory`/`rb_surface`/`rb_accent_hover`), kept in sync
   by hand since Elementor doesn't expose its Kit colors as theme-
   readable CSS variables the way it does for typography.
   ========================================================================== */

:root {
	/* --- Brand --- */
	--rb-primary:        #680B14; /* Deep Burgundy — 12.75:1 on white; brand accent, light backgrounds */
	--rb-primary-hover:  #520910;
	--rb-primary-active: #3E070C;
	--rb-primary-tint:   #F8EEEC; /* brand wash for badges/sections */
	--rb-secondary:      #1B1817; /* Near Black — dark section backgrounds (header/footer/hero), 1.38:1 with Burgundy — do not pair the two as text/bg */
	--rb-accent:         #B49A63; /* Muted Gold — large text/decor/borders/CTAs only (6.51:1 on Near Black; 2.4:1 on Ivory/White — NOT safe as small text on light, use --rb-accent-dark there) */
	--rb-accent-hover:   #CFB57E; /* lightened Muted Gold — hover/active brighten step, same relative lift as the prior brass pairing */
	--rb-accent-dark:    #7A5F2E; /* darker gold for small text on light (5.32:1 on Ivory, 5.99:1 on White) — unchanged, still passes against the new Ivory */

	/* --- Semantic --- */
	--rb-success: #1D7A46;
	--rb-warning: #A15C07;
	--rb-danger:  #B42318;
	--rb-info:    #175FA9;

	/* --- Neutrals (warm gray ramp; endpoints re-locked to Ivory/Charcoal, 100-800 unchanged) --- */
	--rb-gray-50:  #F5F1EA; /* Ivory */
	--rb-gray-100: #F3EFED;
	--rb-gray-200: #E7E0DD;
	--rb-gray-300: #D5CCC8;
	--rb-gray-400: #B0A5A1;
	--rb-gray-500: #8A7F7B; /* min for meaningful UI borders (3:1) */
	--rb-gray-600: #6C625F; /* text-secondary (5.92:1) */
	--rb-gray-700: #514844;
	--rb-gray-800: #362F2D;
	--rb-gray-900: #302C2A; /* Charcoal */

	/* --- Roles --- */
	--rb-bg:             #FFFFFF;
	--rb-surface:        var(--rb-gray-50); /* Ivory-tinted light backgrounds */
	--rb-ivory:          #F5F1EA; /* same value as --rb-surface, named separately for its TEXT role (brand name/nav/CTA/footer text on dark) vs surface's background role */
	--rb-muted:          var(--rb-gray-100);
	--rb-border:         var(--rb-gray-200); /* decorative dividers */
	--rb-border-input:   var(--rb-gray-500); /* functional boundaries */
	--rb-text:           var(--rb-gray-900); /* Charcoal */
	--rb-text-secondary: var(--rb-gray-600);
	--rb-text-invert:    #FFFFFF;

	/* --- Typography ---
	   Authority is the Elementor Kit's Theme Style (Site Settings ->
	   Typography): heading tags h1-h6 and the "Primary"/"Secondary"/
	   "rb_nav"/"rb_display" Global Fonts are Raleway; body/button/form
	   fields and the "Text"/"Accent"/"rb_body_large" etc. Global Fonts
	   are Futura. These two tokens mirror that Kit configuration for
	   the theme's OWN component CSS (which can't reference Elementor's
	   `--e-global-typography-*` vars directly by class-tag selector the
	   way Kit-generated CSS can) so there's one edit point, not two independent
	   values to keep in sync by hand. Elementor's own Typography control
	   can only hold one font name + one sitewide generic fallback
	   (`default_generic_fonts`, "Sans-serif") — it cannot express the
	   full Futura fallback chain below, so --rb-font-body carries the
	   complete chain and a small supplementary rule further down this
	   file (search "Futura fallback completion") applies it to the
	   handful of selectors where Elementor's 2-link version would
	   otherwise win. */
	--rb-font-display: Raleway, sans-serif;
	--rb-font-body:    Futura, "Trebuchet MS", Arial, sans-serif;

	/* --- Spacing scale (4px base) --- */
	--rb-space-1: 4px;
	--rb-space-2: 8px;
	--rb-space-3: 12px;
	--rb-space-4: 16px;
	--rb-space-5: 24px;
	--rb-space-6: 32px;
	--rb-space-7: 48px;
	--rb-space-8: 64px;
	--rb-space-9: 96px;
	--rb-space-10: 128px;

	/* --- Radius --- */
	--rb-radius-sm:   6px;  /* inputs, tags */
	--rb-radius-md:   10px; /* cards, buttons */
	--rb-radius-lg:   16px; /* feature panels, modals */
	--rb-radius-pill: 999px;

	/* --- Layout --- */
	--rb-container:        1200px;
	--rb-container-narrow: 800px;  /* articles, forms */
	--rb-container-wide:   1360px; /* map split view */
	--rb-grid-gap:         28px;
	--rb-grid-gap-mobile:  16px;
	--rb-section-pad:      var(--rb-space-9); /* desktop section rhythm */
	--rb-section-pad-mobile: var(--rb-space-7);

	/* --- Elevation (warm-tinted, subtle) --- */
	--rb-shadow-xs: 0 1px 2px rgba(32, 27, 25, 0.06);
	--rb-shadow-sm: 0 2px 8px rgba(32, 27, 25, 0.08);
	--rb-shadow-md: 0 6px 20px rgba(32, 27, 25, 0.10);
	--rb-shadow-lg: 0 16px 40px rgba(32, 27, 25, 0.14);

	/* --- Opacity --- */
	--rb-opacity-disabled: 0.5;
	--rb-opacity-overlay:  0.55; /* ink overlay on hero imagery */

	/* --- Motion --- */
	--rb-ease:            cubic-bezier(0.2, 0, 0.2, 1);
	--rb-duration-fast:   150ms;
	--rb-duration-base:   200ms;
	--rb-duration-slow:   300ms;
	--rb-hover-lift:      translateY(-2px); /* cards pair with shadow-md */
}

/* --- Futura fallback completion ---
   Elementor's Typography control can only emit "font-family: X, {one
   generic keyword}" (confirmed by reading elementor/includes/controls/
   groups/typography.php) — it cannot hold "Futura, 'Trebuchet MS',
   Arial, sans-serif" as a single field. Futura is not a bundled/
   web-loadable font (unlike Raleway, which Elementor auto-loads from
   Google Fonts because it recognizes the name) — most Windows visitors
   have neither Futura nor an Elementor-loaded replacement, so skipping
   straight to the browser's generic sans-serif default loses the
   closer, still-common "Trebuchet MS"/Arial step the brief calls for.
   Two distinct gaps, confirmed live (not guessed) via computed-style +
   matched-rule inspection on a real page, needing two distinct fixes:

   1) The Kit's Theme Style (Site Settings -> body/button/form-field/
      form-label typography) bakes a LITERAL "Futura", Sans-serif string
      into each of those selectors — it never references a CSS variable,
      so it can only be completed by re-declaring the same selectors. */
html body.elementor-kit-6,
html .elementor-kit-6 button,
html .elementor-kit-6 input:not([type="button"]):not([type="submit"]),
html .elementor-kit-6 textarea,
html .elementor-kit-6 .elementor-field-textual,
html .elementor-kit-6 .elementor-button,
html .elementor-kit-6 label {
	font-family: var(--rb-font-body);
}

/* 2) Every native Elementor widget left on its DEFAULT (non-customized)
      typography instead emits `font-family: var(--e-global-typography-
      {role}-font-family), Sans-serif` — one such rule PER WIDGET TYPE,
      baked into EVERY page's own generated CSS (confirmed live: e.g.
      `.elementor-widget-text-editor` in a page's own post-{id}.css).
      There is no fixed, enumerable list of these selectors — chasing
      them one by one would be exactly the unbounded selector list this
      correction is supposed to avoid. Redeclaring the Global Font
      variables THEMSELVES for every body/UI-role font (leaving the
      heading-role vars alone — Raleway's chain is already complete) is
      the single point that fixes all of them at once, present and
      future, with no selector enumeration: every one of those
      generated rules already ends in `, Sans-serif`, so the value here
      omits it to avoid a doubled-up fallback. */
html .elementor-kit-6 {
	--e-global-typography-text-font-family: Futura, "Trebuchet MS", Arial;
	--e-global-typography-accent-font-family: Futura, "Trebuchet MS", Arial;
	--e-global-typography-rb_body_large-font-family: Futura, "Trebuchet MS", Arial;
	--e-global-typography-rb_small-font-family: Futura, "Trebuchet MS", Arial;
	--e-global-typography-rb_caption-font-family: Futura, "Trebuchet MS", Arial;
}

/* --- Surface-aware heading default (Phase 27.1) ---
   Elementor's own Heading WIDGET (distinct from the Kit's Theme Style
   h1-h6 rules, which govern bare tags) hardcodes its unstyled default
   to the "Primary" Global Color — confirmed by reading elementor/
   includes/widgets/heading.php: `'global' => ['default' => Global_
   Colors::COLOR_PRIMARY]`. That's Burgundy, and it generates a
   selector (`.elementor-widget-heading .elementor-heading-title`)
   specific enough to beat the Kit's own h1-h6 Theme Style color,
   which is why the Phase 26.0 Theme Style change to Charcoal never
   actually reached real Heading-widget titles (confirmed live: every
   page's H1 rendered Burgundy regardless). Burgundy-as-default-heading
   was never surface-aware — fine by coincidence on light backgrounds,
   illegible on dark ones (1.38:1 on Near Black).
   This can't be fixed by editing Elementor core (forbidden) or by
   changing what "Primary" means (would corrupt every legitimate
   Burgundy usage elsewhere). Instead this redeclares the SAME selector
   at higher-but-legitimate specificity, pointing unstyled headings at
   the Kit's "Text" Global Color (Charcoal) — correct for the light-
   surface majority case. Any EXISTING dark section already sets its
   own explicit Elementor color (header wordmark, footer headings, the
   homepage's dark/light panels via the fix below) and is unaffected —
   confirmed by checking every current dark section before adding this
   rule. Any future bare heading on a new dark section still needs its
   own explicit color, exactly as today; this only fixes the far more
   common unstyled-light-heading case. No !important. */
html .elementor-kit-6 .elementor-widget-heading .elementor-heading-title {
	color: var(--e-global-color-text);
}

/* --- Accessibility baseline (global, non-negotiable) --- */
:focus-visible {
	outline: 2px solid var(--rb-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; /* override third-party inline animation */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   BUSINESS COMPONENT FALLBACK (inc/rb-business-component-fallbacks.php,
   ADR-040) — a single business widget's placeholder when the plugin is
   inactive, dropped inline into an otherwise fully-designed Elementor
   page (the hero/CTA/FAQ around it are untouched, real page content).
   ========================================================================== */
.rb-component-fallback {
	padding: var(--rb-space-7) var(--rb-space-5);
	text-align: center;
	background: var(--rb-surface);
	border: 1px dashed var(--rb-border);
	border-radius: var(--rb-radius-lg);
}

.rb-component-fallback__message {
	font-family: var(--rb-font-body);
	color: var(--rb-text-secondary);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	max-width: var(--rb-container-narrow);
	margin-inline: auto;
}

/* ==========================================================================
   BREADCRUMB (inc/presentation/class-rb-breadcrumb.php, ADR-041) — styles
   only the internal RB fallback trail (.rb-breadcrumb--fallback); a
   provider plugin's own breadcrumb (Rank Math, Yoast, etc.) keeps
   whatever styling it already had — restyling third-party markup is a
   redesign decision, out of scope here.
   ========================================================================== */
.rb-breadcrumb--fallback {
	font-family: var(--rb-font-body);
	font-size: 13px;
}

.rb-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rb-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--rb-space-2);
	color: var(--rb-text-secondary);
}

.rb-breadcrumb__item:not(:last-child)::after {
	content: "/";
	margin-left: var(--rb-space-2);
	color: var(--rb-border-input);
}

.rb-breadcrumb__item a {
	color: var(--rb-text-secondary);
	text-decoration: none;
}

.rb-breadcrumb__item a:hover,
.rb-breadcrumb__item a:focus-visible {
	color: var(--rb-primary);
	text-decoration: underline;
}

.rb-breadcrumb__item [aria-current="page"] {
	color: var(--rb-text);
	font-weight: 500;
}