/*
 * Opsonic.ai, the AI back office for contractors.
 *
 * Opsonic's pages ARE Handyman's, structurally, and deliberately so: both
 * products are things you text, both lead on a phone, and the brief was that
 * the two should read as siblings off one design system. So the pages load
 * wereno-handyman.css for the furniture and wrap in <div class="hm opc">: .hm
 * brings every section, the phone, the ornaments and the shared rules scoped to
 * it, and .opc repaints the lot. Same device Renobot already uses.
 *
 * The repaint is four lines, not a second stylesheet. Every coloured rule in
 * wereno-handyman.css resolves through four custom properties, so redefining
 * them on the wrapper moves the whole page to orange without duplicating a
 * single selector or touching anything Handyman renders.
 *
 * The token NAMES still say hm. They are positional, not literal: primary,
 * light, deep, pale field.
 *
 * The orange is sampled from the supplied logo art rather than guessed:
 * #FD6E00 is the most common opaque orange across all three Opsonic files.
 */
.opc{
  --hm-soon:"coming to your area";   /* not "street": see wereno-handyman.css */
  --hm-red:#FD6E00;      /* primary, straight off the logo */
  --hm-light:#FFC79A;    /* highlight, and eyebrow type on the dark bands */
  --hm-deep:#9A3E00;     /* hover, rules */
  --hm-field:#FFF1E6;    /* pale band */
}

/* The primary carries ink at 5.81:1. --hm-deep does not, so the hover state
   flips to cream, exactly as Handyman's and Renobot's do for the same reason. */
body.elementor-kit-8 .opc .wr-btn:hover,
body.elementor-kit-8 .opc .wr-btn:focus{color:var(--wr-cream)}

/* The site's focus ring is #7296F4, which is close to invisible drawn on this
   orange. On anything filled with the primary the ring goes ink instead. */
.opc .wr-btn:focus-visible{outline:3px solid var(--wr-ink);outline-offset:2px}

/* ── the hero headline ──────────────────────────────────────────────────────
 * The stroke under the highlighted phrase is ONE LINE TALL. If the phrase wraps,
 * the SVG stays where a single line would have been and the stroke ends up
 * drawn under the paragraph below the headline, which is exactly what it looked
 * like: an orange rule under the body copy and nothing under the words it
 * belongs to.
 *
 * The line break after the opening sentence is already handled for every
 * product by `.hm .hm-hero h1 > .ui-e-headline-text:first-child::after`, so the
 * phrase does start on its own line. It still did not FIT on it: at the shared
 * 72px, "Opsonic runs the rest." measures 648px in a 564px column. Opsonic's
 * headline is simply longer than its siblings' (Handyman highlights "Handles
 * anything.", Renobot "works for you."), so it takes a smaller size rather than
 * a shorter promise. Measured: 60px puts the opening sentence at 475px and the
 * phrase at 533px, both inside 564. 64px puts the phrase at 572 and breaks it.
 *
 * SELECTOR IS .hm.opc, NOT .opc. build_shell links this sheet BEFORE
 * wereno-handyman.css, so `.opc .hm-hero h1` and `.hm .hm-hero h1` are both
 * (0,2,1) and Handyman wins the tie on source order. The token overrides at the
 * top of this file are immune to that because they are inherited custom
 * properties on the wrapper, not a cascade contest; a plain declaration is not.
 */
@media(min-width:1280px){ .hm.opc .hm-hero h1{font-size:60px} }
/* The shared 56px for this range assumes a shorter phrase. The copy column
   narrows faster than the type does here: it is 564px at 1279 but 463px at
   1025, where 56px would need 504. 48px needs 427 and clears the whole band. */
@media(min-width:1025px) and (max-width:1279px){ .hm.opc .hm-hero h1{font-size:48px} }