/**
 * Davinci Micro Fulfillment — Elementor page utility classes.
 *
 * Standalone stylesheet for pages built via the lovable-to-elementor skill's
 * generated Elementor JSON (see .claude/skills/lovable-to-elementor).
 * Deliberately kept separate from dmf-new-design.css: that file's rules are
 * compound-selector-coupled to Divi's own module markup (.et_pb_text_inner,
 * .et_pb_button, etc.), won't match Elementor's container/widget DOM, and
 * it's gated behind the Divi old/new-design toggle. This file is
 * Elementor-only, self-contained (doesn't rely on that file's :root
 * tokens), and always enqueued regardless of the toggle — so an Elementor
 * page's styling never depends on Divi-page state.
 *
 * Only add classes here that are pure class selectors a page-content JSON
 * generator can safely attach via an Elementor "CSS Classes" field — no
 * descendant/compound selectors assuming a particular builder's markup.
 *
 * Source of truth for these values: lovable-site/src/styles.css /
 * .claude/skills/divi-page-content/STYLE-GUIDE-NEW.md.
 */

.dmf-elementor-bg-primary   { background: #0D1B2A; }
.dmf-elementor-bg-secondary { background: #0A1520; }
.dmf-elementor-bg-deepest   { background: #071018; }

/*
 * Divi's fixed/transparent nav renders #main-header as position:fixed,
 * floating over whatever's beneath it. On a normal Divi Builder page,
 * Divi's custom.js measures the header height off an actual .et_pb_row and
 * sets #page-container's padding-top to compensate; that measurement finds
 * nothing on an Elementor page (no .et_pb_row exists) and silently no-ops,
 * so the first section renders straight under the floating header instead
 * of clear of it. Elementor pages need their own explicit clearance.
 * !important is required to beat that same JS's inline
 * style="padding-top:...", which — when it does fire — computes a value
 * that doesn't account for a headerless-row page either.
 * 72px matches the `menu_height`/`minimized_menu_height` customizer value
 * dmf_new_header_option_values() sets in inc/design-toggle.php; update
 * this alongside that if the header height ever changes.
 */
body.elementor-page #page-container {
  padding-top: 72px !important;
}

.dmf-elementor-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.dmf-elementor-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.dmf-elementor-form-card {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
}

/*
 * Elementor's button widget has no native "height" control — only a
 * fixed sm/md/lg/xl "Size" preset, none of which is 48px. Button widgets
 * on this page used to set a "button_height" setting to hit the design
 * system's --btn-height (48px) token; that key doesn't exist in
 * Elementor's schema and is silently ignored, so buttons rendered at the
 * default "sm" preset's 40px min-height with 0 vertical padding instead
 * — flatter and more cramped than the pill-shaped buttons the source
 * design uses. Apply via `_css_classes` on every button widget instead.
 */
.dmf-elementor-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  height: 48px;
}

/*
 * Home hero: photo + gradient overlay + radial glow, matching
 * lovable-site's .hero-bg/.hero-overlay/.hero-glow (styles.css ~line 1447)
 * exactly. Elementor free containers only support one background *type*
 * (classic/gradient) each — free Elementor has no way to layer an image,
 * a gradient overlay, and a radial glow on one element natively, and
 * per ELEMENTOR-JSON-RULES.md there's no custom_css to fall back on
 * (Pro-only, silently no-ops). CSS's own comma-separated multi-layer
 * `background-image` does the same job in one property on the section's
 * own outer container — no extra absolutely-positioned overlay divs
 * needed. Layer order matches source order (first = topmost):
 * radial glow, then the diagonal gradient overlay, then the photo.
 */
.dmf-elementor-hero-home {
  background-image:
    radial-gradient(circle, rgba(250, 110, 29, 0.06) 0%, transparent 65%),
    linear-gradient(135deg, rgba(5, 13, 20, 0.96) 0%, rgba(13, 27, 42, 0.90) 50%, rgba(31, 59, 87, 0.78) 100%),
    url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?w=1920&q=80&auto=format&fit=crop');
  background-size: 700px 700px, cover, cover;
  background-position: top -200px right -200px, center, center 40%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/*
 * About hero: same photo + gradient overlay + radial glow technique as
 * .dmf-elementor-hero-home above, matching lovable-site's .about-hero .hero-bg
 * override (styles.css ~line 1666) — only the photo URL differs. Unlike the
 * home hero, the corner glow here is navy (#1F3B57) instead of brand orange
 * — a deliberate per-page request so the About hero reads black-and-blue
 * with no orange accent, not a byproduct of the shared .hero-glow source.
 */
.dmf-elementor-hero-about {
  background-image:
    radial-gradient(circle, rgba(31, 59, 87, 0.14) 0%, transparent 65%),
    linear-gradient(135deg, rgba(7, 16, 24, 0.96) 0%, rgba(13, 27, 42, 0.90) 50%, rgba(31, 59, 87, 0.78) 100%),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80&auto=format&fit=crop');
  background-size: 700px 700px, cover, cover;
  background-position: top -200px right -200px, center, center 40%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/*
 * Card hover lift (.pillar-card:hover / .step-card:hover / .quote-card:hover in
 * styles.css all include `transform: translateY(...)`). Elementor's container
 * widget has a real "Hover" tab (border/background/box-shadow — see the
 * border_hover_*/background_hover_* settings already used on these cards) but
 * no transform/hover-animation control at all — confirmed absent from
 * includes/elements/container.php, not just unused. This is the real fallback
 * for that gap, not a simplification: a genuine :hover rule on our own
 * always-enqueued stylesheet, applied via `css_classes` alongside the native
 * border/background hover settings rather than replacing them.
 */
.dmf-elementor-card-hover-lift {
  transition: transform 0.25s;
}
.dmf-elementor-card-hover-lift:hover {
  transform: translateY(-4px);
}

/*
 * Pillar/differentiator card top accent bar (.pillar-card::after in
 * styles.css) — fades in on hover. Same "no pseudo-element support in
 * Elementor" gap as the lift above; same fallback. Requires the card
 * itself to be `position: relative` (a real, native container setting —
 * set it there, not here) so this `::after` anchors to the card and not
 * some further-up positioned ancestor.
 */
.dmf-elementor-pillar-card::after {
  content: "";
  background: #FA6E1D;
  opacity: 0;
  height: 2px;
  transition: opacity 0.25s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.dmf-elementor-pillar-card:hover::after {
  opacity: 1;
}

/*
 * Quote/testimonial card left accent (.quote-card in styles.css): only the
 * left edge is orange at rest (4px, full opacity) while the other three
 * sides are the same subtle gray every other card uses; on hover all four
 * sides brighten toward orange except the left, which stays exactly as it
 * was (`border-left-color: var(--orange)` is re-asserted in the source
 * hover rule specifically so it doesn't get diluted by the shared
 * border-color hover transition). Elementor's border control only accepts
 * one color for all four sides — border_color/border_hover_color on these
 * cards are set to the resting/hover gray-to-orange-tint values that apply
 * correctly to the top/right/bottom edges, and this class overrides just
 * the left edge back to full orange in both states, matching the source's
 * asymmetric treatment natively unsupported by a single border control.
 */
.dmf-elementor-quote-card {
  border-left-color: #FA6E1D !important;
}

/*
 * Quote-card industry tag pill (.quote-brand-tag in styles.css — "CPG /
 * Household", "Premium Beverage"). A container-based badge, same pattern as
 * the other dmf-elementor-* badges, but this one must shrink to fit its own
 * text rather than take a fixed size: Elementor's base `.e-con` rule sets
 * `width: 100%` unconditionally (see ELEMENTOR-JSON-RULES.md's container
 * width/height note), which would stretch a pill full-width regardless of
 * `content_width`/`width` settings — `width: auto` here overrides that back
 * to the natural inline-flex shrink-to-content sizing a pill needs, since
 * "CPG / Household" and "Premium Beverage" aren't the same length.
 * `align-items` needs `!important`: Elementor's own frontend.min.css ships
 * a plain `.e-flex{align-items:normal}` rule — equal specificity to this
 * class, and it should lose on source order alone (this stylesheet loads
 * after frontend.min.css) but doesn't in practice, so force it rather than
 * leave the pill's text sitting at the top instead of vertically centered.
 */
.dmf-elementor-pill {
  display: inline-flex;
  align-items: center !important;
  width: auto;
  padding: 0 12px;
  border-radius: 100px;
  background: rgba(46, 117, 182, 0.15);
  border: 1px solid rgba(46, 117, 182, 0.25);
}

/*
 * Shape-only version of the pill fix above, for pills that need their own
 * per-instance background/border colors set as native Elementor settings
 * instead of the fixed blue used by .dmf-elementor-pill (e.g. the About
 * page's orange facility-location node tags). Same fix, same reasoning:
 * `width: auto` overrides the base `.e-con{width:var(--width)}` full-width
 * default so the pill shrinks to its own text instead of stretching full-row
 * width and forcing every pill onto its own line under flex_wrap.
 */
.dmf-elementor-pill-shape {
  display: inline-flex;
  align-items: center !important;
  width: auto;
}

/*
 * Permanent left-edge accent border that must stay orange in both resting
 * and hover states, independent of whatever color the other three sides use
 * (e.g. the About page's differentiator cards: `border-left: 4px solid
 * var(--orange)` at all times, while the other 3 sides go from a subtle gray
 * at rest to a warmer hover tint — see .differentiator-card in styles.css).
 * Same fix as .dmf-elementor-quote-card above, generalized: Elementor's
 * border_color/border_hover_color controls apply one color to all four
 * sides, so the left edge needs to be forced back to orange in both states
 * rather than following the shared border-color transition.
 */
.dmf-elementor-accent-left-border {
  border-left-color: #FA6E1D !important;
}
.dmf-elementor-accent-left-border:hover {
  border-left-color: #FA6E1D !important;
}

@media (max-width: 767px) {
  .dmf-elementor-container {
    padding: 0 20px;
  }
}

/*
 * Partial-color emphasis spans within a heading/text widget's title/editor
 * HTML (e.g. "On Every Marketplace." picked out in orange within an
 * otherwise-white headline). Use these classes instead of an inline
 * style="color:..." attribute on the span — a security/sanitization layer
 * on the staging (and presumably production) environment silently breaks
 * the ENTIRE page's Elementor render when a widget's title/editor content
 * contains an inline style attribute (confirmed by bisection: identical
 * content with class= instead of style= renders fine; this is unrelated to
 * classic vs. container elType, which was a red herring from an earlier,
 * wrong diagnosis). Always use these classes for inline color emphasis in
 * widget HTML content — never a raw style attribute.
 */
.dmf-text-accent { color: #FA6E1D; }
.dmf-text-white { color: #FFFFFF; }
.dmf-text-muted { color: rgba(255, 255, 255, 0.72); }