/**
 * mjr-design.css — design/accessibility overrides for Mikaku Japanese
 * Restaurant, layered on top of Blocksy + Elementor + WPForms output.
 *
 * This file NEVER touches Elementor/Brizy saved content (section layout,
 * widget order) — every rule here is a pure CSS override, enqueued after
 * Elementor's own stylesheets (see mjr-core.php) so it can win the cascade.
 *
 * All colors below were measured against the live site on 2026-07-09 via
 * Playwright (getComputedStyle + the live Elementor per-page CSS files),
 * not guessed. Contrast ratios use the standard WCAG relative-luminance
 * formula against the site's real background, #0f0f0f.
 */

:root {
	/* Unified 3-color palette: black (existing bg) + gold (headings/CTA) +
	 * red (ABURI emphasis only, already correct in Elementor content — kept
	 * here for reference, not reassigned by this file). */
	--mjr-bg: #0f0f0f;
	--mjr-gold: #FFBA00;       /* matches the site's own existing hero-title
	                              gold (H2.elementor-size-xxl, element
	                              7532ad1 on about-us) — chosen as the
	                              unification target instead of a brand-new
	                              hue, since it's already the most prominent
	                              gold instance on the site. 11.21:1 vs bg. */
	--mjr-gold-text: #14110B;  /* dark text for use ON a gold background
	                              (CTA button label). 11.01:1 vs --mjr-gold. */
	--mjr-red: #FF0000;        /* the ABURI heading's existing color
	                              (H2.elementor-size-xl, element fb0b2ca) —
	                              4.79:1 vs bg, passes AA. Not reassigned;
	                              listed so the whole palette lives in one
	                              place. */
	--mjr-text: #E8E6E1;       /* body text fix color, 15.37:1 vs bg. */
	--mjr-muted-text: #B9B0A2;
	--mjr-panel-bg: #17130D;
	--mjr-line: rgba(255, 186, 0, 0.28);
	--mjr-card-bg: #1f1a12;    /* NAP card background — a warm, barely-there
	                              lift off pure black, defined mainly by its
	                              gold border rather than the bg shade alone. */
}

/* ============================================================
   1. Body-text contrast fix (WCAG AA) — HIGHEST PRIORITY
   ============================================================
   Measured bug: the About page's descriptive paragraph — rendered by
   Elementor as an H1.elementor-heading-title.elementor-size-xxl (element
   df3538d) — computes to color:#192A3D against the page's #0f0f0f
   background. That's a 1.31:1 contrast ratio (relative-luminance formula),
   far below the 4.5:1 WCAG AA minimum for normal text. #192A3D is
   Blocksy's own --theme-palette-color-4, a shade meant for text on a LIGHT
   background; this site runs dark and the color was never swapped for this
   one widget (its sibling .elementor-widget-container correctly inherits
   the theme's normal off-white body color — only this inner heading
   re-declares the wrong one).

   Selector rationale: across all 3 key pages, h1.elementor-heading-title is
   used ONLY for this pattern (a paragraph styled as a heading) — the site's
   real, colorful headings are h2 (hero title / "ABURI") or h4/h6 (see
   section 2). Targeting the h1 tag itself, rather than the one specific
   element ID, also catches any future page that reuses this same pattern.

   Fixed contrast: --mjr-text (#E8E6E1) vs #0f0f0f = 15.37:1 (AAA).

   !important: this heading's color is set directly by Elementor's own
   per-widget generated CSS, loaded from a small per-post stylesheet with
   its own class-based specificity we don't control from a separately
   enqueued file — !important guarantees the accessibility fix always wins,
   regardless of Elementor regenerating that CSS later.
   ============================================================ */
h1.elementor-heading-title {
	color: var(--mjr-text) !important;
}

/* ============================================================
   2. Color palette unification
   ============================================================
   Measured: the site currently mixes THREE different "gold" tones across
   pages — #87803A (address, h6.elementor-heading-title, element 1a34efd),
   #E4D796 ("FOLLOW US", h4.elementor-heading-title, element 7beaab8), and
   #FFBA00 (the actual hero title, h2.elementor-size-xxl — already correct,
   left untouched). Plus the "online order" CTA button using an unrelated
   sky blue (#5FBEEC) that matches nothing else on the site.

   Selector rationale: h4/h6.elementor-heading-title are each used for
   exactly one distinct purpose sitewide in the current content (address,
   social heading) — unlike h2, which is shared between the correctly-gold
   hero title AND the intentionally-red "ABURI" callout, so h2 is
   deliberately left alone here to avoid recoloring ABURI's red.

   !important: same reasoning as section 1 — these colors come from
   Elementor's per-widget generated CSS.
   ============================================================ */
h4.elementor-heading-title,
h6.elementor-heading-title {
	color: var(--mjr-gold) !important;
}

/* "online order" CTA button — was sky blue (#5FBEEC bg / #121B0C text),
 * matching neither the brand blue (#2872fa) nor the black/gold/red
 * palette. Moved to gold: the highest-contrast, most attention-grabbing
 * color available in the unified palette (11.21:1 vs bg — noticeably
 * higher than red's 4.79:1), so the CTA reads as the single most visible
 * element on the page, exactly as a call-to-action should.
 * !important: Elementor writes this button's colors as inline-specificity
 * per-widget CSS (background-color/color/fill on
 * .elementor-element-07cf29c .elementor-button) which this broader,
 * page-agnostic selector needs to beat reliably. */
.elementor-button {
	background-color: var(--mjr-gold) !important;
	color: var(--mjr-gold-text) !important;
	border-color: var(--mjr-gold) !important;
	fill: var(--mjr-gold-text) !important;
}
.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--mjr-gold-text) !important;
	color: var(--mjr-gold) !important;
	border-color: var(--mjr-gold) !important;
}

/* Facebook/Instagram brand icons are deliberately NOT touched anywhere in
 * this file — their native brand colors are correct and out of scope. */

/* ============================================================
   3. Contact form (WPForms) — dark-theme restyle
   ============================================================
   Measured: WPForms renders plain white inputs (bg #ffffff, border
   #cccccc) that visually clash against the page's black background, and
   its submit button (.wpforms-submit) currently inherits Blocksy's raw
   brand blue (#2872fa) — a fourth, unrelated color alongside the CTA
   button's old sky blue and the ABURI red.

   !important throughout this section: WPForms ships its own base
   stylesheet (loaded before this file, per the enqueue dependency in
   mjr-core.php) with element-level selectors on the same input/button
   tags — !important is needed to reliably win over WPForms' own defaults
   without having to chase its exact specificity.
   ============================================================ */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
	background-color: #f5f5f5 !important; /* toned-down light, not pure
	                                          white, so it doesn't glare
	                                          against the black page */
	color: #222222 !important;
	border: 1px solid var(--mjr-gold) !important;
	border-radius: 4px !important;
}

/* Clear, high-contrast focus state (was relying on the browser default
 * outline, easy to lose against a black page). */
.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container input[type="number"]:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	outline: 2px solid var(--mjr-gold) !important;
	outline-offset: 2px;
	border-color: var(--mjr-gold) !important;
}

.wpforms-field-label,
.wpforms-field-sublabel {
	color: var(--mjr-text) !important;
}

/* Submit button — same CTA color system as the "online order" button
 * above, so there is exactly one CTA treatment sitewide instead of two
 * unrelated blues. */
.wpforms-submit {
	background-color: var(--mjr-gold) !important;
	color: var(--mjr-gold-text) !important;
	border: 1px solid var(--mjr-gold) !important;
	font-weight: 700;
}
.wpforms-submit:hover,
.wpforms-submit:focus {
	background-color: var(--mjr-gold-text) !important;
	color: var(--mjr-gold) !important;
	outline: 2px solid var(--mjr-gold) !important;
	outline-offset: 2px;
}

/* ============================================================
   4. NAP block card styling (nap-injector.php output)
   ============================================================
   nap-injector.php prints a plain, unstyled
   <div class="mjr-nap-block" style="text-align:center;padding:24px
   16px;font-size:14px;line-height:1.6;">. That inline style is left
   exactly as-is by this file (PHP untouched, per this task's CSS-only
   scope) — the rules below layer a card treatment on top of it.

   !important on padding/margin/font-size: nap-injector.php sets those
   three properties as an INLINE style attribute, which normally beats any
   external stylesheet regardless of selector specificity — !important is
   required here specifically to override an inline style, not just to win
   a specificity fight.
   ============================================================ */
.mjr-nap-block {
	background-color: var(--mjr-card-bg);
	border: 1px solid var(--mjr-gold);
	border-radius: 10px;
	max-width: 420px;
	margin: 32px auto !important;
	padding: 28px 32px !important;
	font-size: 16px !important;
	color: var(--mjr-text) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Single decorative location-pin icon ahead of the block. A pure ::before
 * insertion — no HTML/PHP change needed, so nap-injector.php's plain-text
 * output (name / address / phone, each on its own <br>-separated line)
 * stays exactly as mjr_nap_scan() expects to read it (see
 * nap-consistency.php) — this is styling only, not new content. */
.mjr-nap-block::before {
	content: "📍";
	display: block;
	font-size: 22px;
	margin-bottom: 8px;
}

/* ============================================================
   5. Mobile heading wrap fix
   ============================================================
   Measured: h2.elementor-heading-title.elementor-size-xxl (the hero title)
   computes to a FIXED font-size:59px at every viewport width tested
   (1440px, 768px, 390px alike) — there is no responsive shrink at all,
   which is why "MIKAKU JAPANESE RESTAURANT" overflows its narrow mobile
   container and wraps mid-word ("RESTAURA/NT") instead of at a word
   boundary.

   Fix: clamp() keeps the exact current 59px (3.6875rem) at desktop widths
   — nothing changes above ~840px viewport width, where 7vw already
   exceeds the 3.6875rem ceiling — and scales down smoothly on narrow
   viewports. word-break:keep-all (plus overflow-wrap:normal, which
   overrides Elementor's own overflow-wrap:break-word default) makes any
   wrap that does happen land between whole words, never mid-word. Applied
   broadly to .elementor-heading-title (not just the xxl hero) since the
   same mid-word-break risk applies to any heading text, and this rule has
   no effect on elements that already fit on one line.
   ============================================================ */
.elementor-heading-title {
	overflow-wrap: normal !important;
	word-break: keep-all !important;
}

/* Hero title ("MIKAKU JAPANESE RESTAURANT") size. Section 6 below now also
 * sets this selector's font-family/font-weight/letter-spacing (Cormorant
 * Garamond) — kept as a separate rule here rather than merged into section
 * 6 so this file's mobile-wrap history stays in one place. Updated this
 * round from clamp(1.5rem, 7vw, 3.6875rem) to clamp(2.25rem, 5vw, 4rem)
 * per explicit instruction — note this also raises the desktop ceiling
 * slightly (was measured at 59px/3.6875rem; 4rem = 64px), not just a
 * unit/font swap. */
.elementor-heading-title.elementor-size-xxl {
	font-size: clamp(2.25rem, 5vw, 4rem) !important;
	line-height: 1.15 !important;
}

/* ============================================================
   6. Typography system — Cormorant Garamond (headings) + Poppins (body/UI)
   ============================================================
   Adds Cormorant Garamond + Poppins ALONGSIDE the site's existing Google
   Fonts (enqueued in design-enqueue.php) — Roboto/Roboto Slab (Elementor
   Kit global typography), Abril Fatface, Amiri, Bungee Shade are not
   unregistered or removed. Where each currently renders (measured via
   Playwright getComputedStyle + the live Elementor per-page CSS files),
   for reference:
     - Roboto (weight 600, via the Elementor Kit's --e-global-typography-
       primary-* variable): the hero title, h2.elementor-size-xxl
       (element 7532ad1) — this file's rule below overrides it to
       Cormorant Garamond.
     - Roboto Slab (the Kit's --e-global-typography-secondary-* variable):
       declared in the Kit's global CSS but NOT rendered by any element on
       any of the 3 key pages — confirmed by scanning every visible
       element's computed font-family. Dead weight in the current font
       load; a candidate for removal in a later round, not touched here.
     - Abril Fatface: the "online order" button (element 07cf29c,
       home page only) — overridden below via .elementor-button.
     - Amiri: the address heading (h6.elementor-heading-title, element
       1a34efd, home page) — overridden below via the h4/h6 rule.
     - Bungee Shade: "FOLLOW US" (h4.elementor-heading-title, element
       7beaab8, home page) — overridden below via the h4/h6 rule.
     - The "ABURI" heading (h2.elementor-size-xl, element fb0b2ca) uses
       NONE of the 5 fonts above — it was already falling back to the
       theme's system-font stack before this file touched anything.

   !important throughout: every selector below competes with either
   Elementor's per-widget generated CSS (class + element-ID selectors) or
   a global CSS custom property (--e-global-typography-primary-font-
   family) — both outrank a plain single-class selector in specificity,
   so !important is needed the same way section 1/2 already established.
   ============================================================ */

h1,
h2,
h3,
.elementor-heading-title {
	font-family: 'Cormorant Garamond', serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.8px !important;
}

/* "ABURI" — same Cormorant Garamond treatment as every other heading via
 * the rule above; this rule only adds its own responsive size. Selector
 * is scoped to elementor-size-xl because that size class is unique to
 * ABURI among current visible headings (the hero title uses
 * elementor-size-xxl instead) — color is untouched here, it already
 * comes through correctly as --mjr-red via Elementor's own per-widget CSS. */
.elementor-heading-title.elementor-size-xl {
	font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
}

/* Exception: the About page's long description paragraph is markup'd by
 * Elementor as an h1.elementor-heading-title (element df3538d — same one
 * whose color section 1 fixes), so it would otherwise match the general
 * heading rule above and render as multi-sentence prose in a serif
 * display face. Scoped to this specific element ID (not the h1 tag
 * generally) so it can't ever affect a genuine short heading — verified
 * against the live site that df3538d is the only element carrying this
 * "prose styled as h1" pattern on any of the 3 key pages; the hero title
 * (element 7532ad1, h2.elementor-size-xxl) and "ABURI" (element fb0b2ca,
 * h2.elementor-size-xl) are untouched by this selector.
 *
 * The second selector (with the trailing ` *`) is required, not
 * decorative: the actual visible text sits in a <span> one level inside
 * the h1, and that span carries its own inline
 * style="font-family:Arial, Helvetica, sans-serif;font-size:small;
 * font-weight:900" — an inline style always wins over a rule that only
 * targets the h1 and relies on inheritance, no matter how specific or
 * !important that rule is. Targeting every descendant directly is what
 * actually overrides the inline style. letter-spacing is reset to
 * `normal` here too, undoing the 0.8px the general heading rule above
 * would otherwise add. */
.elementor-element-df3538d .elementor-heading-title,
.elementor-element-df3538d .elementor-heading-title * {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 1.8 !important;
	letter-spacing: normal !important;
}

/* Body copy: Elementor text widgets, and the theme's own paragraphs. Does
 * NOT touch h1/h2/h3/.elementor-heading-title above — including the
 * df3538d exception just above, which is scoped by element ID
 * specifically so it wins over the general heading rule without this
 * block needing to know about it. */
body,
p,
.elementor-widget-text-editor {
	font-family: 'Poppins', sans-serif !important;
	font-size: 18px !important;
	line-height: 1.8 !important;
	font-weight: 400 !important;
}

/* Navigation links. */
.ct-menu-link {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: 0.5px !important;
}

/* Buttons — CTA color already unified in section 2/3; this adds the
 * matching type treatment. */
.elementor-button,
.wpforms-submit {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
}

/* Site title ("MIKAKU"). No font-family override requested here, so it
 * inherits Poppins from the `body` rule above; only weight/letter-spacing
 * are set explicitly. */
.site-title a {
	font-weight: 700 !important;
	letter-spacing: 1px !important;
}

/* ============================================================
   7. Home-page hero logo (fills the empty space below the social icons)
   ============================================================
   Measured (Playwright, both key viewports): the space between the social
   icons and the "online order" button is NOT one empty Elementor section
   waiting for content — the home page's top area is built from several
   stacked sections each collapsed to ~20px tall, with the social-icon
   widget (element 44d3688) and the button (element 07cf29c) each
   independently absolutely-positioned (Elementor's per-widget "Position:
   Absolute" motion-effect) with their own top offsets. The visual gap is
   an emergent side effect of those two offsets, not a dedicated slot.

   Placement approach — ::before on the existing first section, not a
   background-image on a wrapper: a background-image directly on
   `.elementor-71` or the section would sit BEHIND that section's own
   background and repeat/tile across its full (collapsed) box unless
   fought with extra sizing rules, and would need re-deriving offsets if
   Elementor ever resizes that section. A `::before` is an independent,
   explicitly-sized/positioned box we fully control, layered on
   `.elementor-element-96f41f7` specifically because Elementor already set
   that section to position:relative (confirmed via computed style) — no
   position change of our own needed, so this can't alter how any other
   absolutely-positioned sibling widget resolves ITS OWN offsets.

   Coordinates below are measured, not guessed, at the two viewports this
   task verifies (1440px desktop / 390px mobile):
     - Desktop: section top=180px (page px), social icon bottom=184px,
       button top=460px → usable gap is 276px tall, starting 4px below
       the section's own top edge. A 240×94px logo (matches the source
       file's 1284:501 aspect ratio) centered in that gap sits at
       top:95px relative to the section.
     - Mobile (<=767px): section top=125px, social bottom=127px, button
       top=442px → gap is 315px tall, starting 2px below the section
       top. A smaller 160×62px logo centered in that gap sits at
       top:128px relative to the section.
   If Elementor's own responsive breakpoint changes these widgets' offsets
   again in the future, these two numbers are the first thing to
   re-measure — they are not derived from a formula that adapts on its own.

   File: MIKAKU-LOGO123.png (1284×501) was chosen over MIKAKU-LOGO.png
   (1920×1080) — the latter has a huge black margin baked around a much
   smaller logo mark, which would fight against precise sizing here.
   Restored file-only (no Media Library re-registration) to
   wp-content/uploads/2022/01/MIKAKU-LOGO123.png — same folder as its
   sibling MIKAKU-LOGO.png's confirmed original path; this exact ID's own
   original path could not be independently confirmed (its REST API
   metadata request 401'd during the original media-usage-audit backup),
   but since this rule and the restored file's location are both
   introduced together here, there is no functional risk either way.

   Both candidate logo files turned out to have a solid, fully-opaque
   near-black fill (RGB 0,0,0) rather than a transparent background,
   despite MIKAKU-LOGO123.png being saved in RGBA — sampled corner pixels
   are alpha:255 throughout. Not swapped for a transparent version (none
   was available in the backup); the visual seam against the page's
   #0f0f0f background is minor given how close #000000 is to #0f0f0f, but
   is a real, measured seam, not eliminated by this rule.

   `pointer-events: none` — purely decorative, must never intercept clicks
   meant for the (invisibly, absolutely-positioned) real widgets that
   structurally overlap this same section. */
.elementor-element-96f41f7::before {
	content: "";
	position: absolute;
	top: 95px;
	left: 50%;
	transform: translateX(-50%);
	width: 240px;
	height: 94px;
	background-image: url('https://mikaku.ca/wp-content/uploads/2022/01/MIKAKU-LOGO123.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
}

@media (max-width: 767px) {
	.elementor-element-96f41f7::before {
		top: 128px;
		width: 160px;
		height: 62px;
	}
}

/* ============================================================
   8. Minimal premium polish
   ============================================================
   This layer keeps the already-fixed accessibility palette intact and adds
   quieter restaurant-site craft: calmer spacing, thinner gold accents, more
   tactile buttons/forms, and a softened contact card. It is intentionally CSS
   only so Elementor's content, widget order, and local SEO/NAP output remain
   unchanged.
   ============================================================ */
body {
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 186, 0, 0.08), transparent 34rem),
		linear-gradient(180deg, #0f0f0f 0%, #15110c 48%, #0f0f0f 100%) !important;
	color: var(--mjr-text) !important;
	text-rendering: optimizeLegibility;
}

.site-main,
.elementor {
	isolation: isolate;
}

.elementor-section {
	position: relative;
}

.elementor-widget:not(:last-child) {
	margin-bottom: 18px !important;
}

.elementor-heading-title {
	text-wrap: balance;
}

h4.elementor-heading-title,
h6.elementor-heading-title {
	color: var(--mjr-gold) !important;
	text-transform: uppercase;
	letter-spacing: 0.14em !important;
	font-size: clamp(0.95rem, 1.3vw, 1.15rem) !important;
}

.elementor-heading-title.elementor-size-xl {
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	text-shadow: 0 0 24px rgba(255, 0, 0, 0.22);
}

.ct-header,
#header {
	backdrop-filter: blur(12px);
}

.ct-menu-link {
	position: relative;
	padding-inline: 2px !important;
	color: var(--mjr-text) !important;
	transition: color 180ms ease;
}

.ct-menu-link::after {
	content: "";
	position: absolute;
	right: 2px;
	bottom: -6px;
	left: 2px;
	height: 1px;
	background: var(--mjr-gold);
	opacity: 0;
	transform: scaleX(0.45);
	transform-origin: center;
	transition: opacity 180ms ease, transform 180ms ease;
}

.ct-menu-link:hover,
.ct-menu-link:focus-visible {
	color: var(--mjr-gold) !important;
}

.ct-menu-link:hover::after,
.ct-menu-link:focus-visible::after {
	opacity: 1;
	transform: scaleX(1);
}

.elementor-button,
.wpforms-submit {
	min-height: 48px;
	padding: 14px 28px !important;
	border: 1px solid var(--mjr-gold) !important;
	border-radius: 999px !important;
	box-shadow: 0 12px 30px rgba(255, 186, 0, 0.18);
	text-transform: uppercase;
	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}

.elementor-button:hover,
.elementor-button:focus-visible,
.wpforms-submit:hover,
.wpforms-submit:focus-visible {
	box-shadow: 0 16px 40px rgba(255, 186, 0, 0.24);
	transform: translateY(-1px);
}

.elementor-button:active,
.wpforms-submit:active {
	transform: translateY(0);
}

.wpforms-container {
	max-width: 720px;
	margin-inline: auto;
	padding: clamp(22px, 4vw, 36px);
	background: rgba(23, 19, 13, 0.82);
	border: 1px solid var(--mjr-line);
	border-radius: 8px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
}

.wpforms-field-label,
.wpforms-field-sublabel {
	letter-spacing: 0.02em;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
	min-height: 48px;
	background-color: #191510 !important;
	color: var(--mjr-text) !important;
	border-color: var(--mjr-line) !important;
	border-radius: 6px !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.wpforms-container textarea {
	min-height: 140px;
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container input[type="number"]:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	background-color: #1f1a12 !important;
	border-color: var(--mjr-gold) !important;
	box-shadow: 0 0 0 4px rgba(255, 186, 0, 0.14);
}

.mjr-nap-block {
	background:
		linear-gradient(180deg, rgba(255, 186, 0, 0.08), transparent 52%),
		var(--mjr-panel-bg);
	border-color: var(--mjr-line);
	border-radius: 8px;
	max-width: 480px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.mjr-nap-block::before {
	content: "";
	width: 44px;
	height: 1px;
	margin: 0 auto 14px;
	background: var(--mjr-gold);
}

p,
.elementor-widget-text-editor {
	color: var(--mjr-text) !important;
}

@media (max-width: 767px) {
	.elementor-widget:not(:last-child) {
		margin-bottom: 14px !important;
	}

	.elementor-button,
	.wpforms-submit {
		width: min(100%, 320px);
		justify-content: center;
	}

	.wpforms-container {
		padding: 20px;
	}

	.mjr-nap-block {
		max-width: calc(100% - 32px);
	}
}