/* ============================================================================
   Hover and focus states.

   From design_handoff_zadoosh_marketing_site/HOVER-STATES.md, which was added
   after the main handoff. This is the one hand-written stylesheet on the page:
   home.css is generated from the design file and carries resting styles only,
   because the design environment authors hover as an attribute that does not
   survive the export.

   Elements are addressed by data-hv, not by generated class name. The port
   script assigns those, so a design change that renumbers classes cannot
   silently detach these rules.

   NO TRANSITIONS. The site has no motion beyond the logo marquee and the
   testimonial rotation. Hover snaps. Nothing lifts, scales or casts a shadow.
   ========================================================================== */

/* The token layer lives in tokens.css, loaded before this file. It used to be
   here, which is why the rules below read var(--accent) and friends without
   declaring them. Moved 2026-09-10. */


/* --- Accent buttons ------------------------------------------------------
   The colour is restated, and that is not redundant. The design's own
   stylesheet carries a global `a:hover { color: #C9501F }` for text links. In
   the design file every button sets its label colour INLINE, which outranks
   that rule. The port moves those colours into classes, and `a:hover` (0,1,1)
   outranks a single class (0,1,0), so without this the label turned #C9501F
   orange on an orange fill and vanished.

   Any future rule here must state colour explicitly for the same reason. */
[data-hv="cta"]:hover {
  background: var(--accent-press);
  color: var(--accent-label-ink);
}

/* --- Secondary buttons: the non-featured pricing plans -------------------- */
/* !important because ctaStyle is computed per plan and lands inline, where a
   stylesheet rule cannot reach it. */
[data-hv="cta2"]:hover {
  background: var(--surface-2-hover) !important;
  color: var(--ink) !important;      /* #16181C, restated for the same reason */
}

/* --- Navigation and footer: elements on ink brighten --------------------- */
[data-hv="nav"]:hover,
[data-hv="foot"]:hover { color: var(--on-ink); }

/* --- Accent text links --------------------------------------------------- */
[data-hv="link-accent"]:hover { color: var(--accent-link-hover); }
/* the underlined variant carries the rule change too: colour alone is a weak
   signal on a link that already has a line under it */
[data-hv="link-accent-ul"]:hover {
  color: var(--accent-link-hover);
  border-bottom-color: var(--accent);
}

/* --- Secondary link on ink ----------------------------------------------- */
[data-hv="link-ink"]:hover {
  color: var(--on-ink);
  border-bottom-color: var(--rule-on-ink-hover);
}

/* --- Rotator prev and next: on light, so they darken --------------------- */
[data-hv="rot"]:hover {
  background: var(--surface-2);
  border-color: var(--rule-strong);
  color: var(--ink);
}

/* --- Pricing audience toggle ---------------------------------------------
   One component with a variant, not two branches. The active segment has no
   hover: it is already selected. data-active is maintained by home.js, and
   !important is needed because the segment styles are swapped inline. */
[data-hv="seg"][data-active="false"]:hover {
  background: var(--surface-3) !important;
  color: var(--ink) !important;
}

/* --- Focus ---------------------------------------------------------------
   Its own state, not a reuse of hover. A fill change does not tell a keyboard
   user where they are; a ring does. The design ships outline:none inline on
   both inputs with no replacement, which is why this needs !important.

   3px offset, matching every other page. Those take their value from the
   design's own style-focus attributes; this page predates that and sat at 2px,
   which was the only thing making the homepage's focus differ. Mayank asked for
   one treatment site-wide on 2026-09-10.

   :focus-visible, so it never fires on a mouse click. One exception, and it is
   the browser's rather than ours: a focused TEXT INPUT always matches
   :focus-visible, mouse or keyboard, because a browser treats a field you are
   about to type into as always warranting an indicator. */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}

/* The URL capture is the one exception, and the same one every other page
   makes: the whole FIELD shows focus, not the bare input. A ring on the input
   draws inside the field's border and cuts the https:// prefix out of it, which
   HOVER-STATES.md calls a limitation of inline authoring rather than the intent.

   Mayank's call, 2026-09-10: the border alone, no ring. The spec asks for both,
   and both together read as two concentric orange rectangles with a dark gap.
   A DELIBERATE DEPARTURE, worth telling Claude Design.

   Keyed on the placeholder, not on a class. The generated names renumber
   whenever the design does, and a stale one here would silently detach the rule
   (BATON.md, trap 11). This selects all three fields: hero, features, closing. */
div:has(> input[placeholder="yourbrand.com"]):has(:focus-visible) {
  border-color: var(--accent);
}

input[placeholder="yourbrand.com"]:focus-visible {
  outline: none !important;
}