/* =========================================================================
   SmartDispute.ai - component classes
   -------------------------------------------------------------------------
   Deliberately short. Layout, spacing, colour, radius and type on this page
   are set with native GenerateBlocks controls that reference the variables
   in tokens.css. Only the three things below cannot be expressed with a
   native control, so they live here:
     1. .sd-hero        - the skyline texture behind the hero
     2. .sd-report      - row banding, so a new row inherits the pattern
     3. .sd-focus       - a visible keyboard focus ring on the CTA
   ========================================================================= */

/* 1. Hero skyline texture. A single 8 KB SVG, no extra HTTP library.
      The colour behind it is set on the block itself in the editor. */
.sd-hero {
  position: relative;
  background-image: url("hero-pattern.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

/* 2. Credit report rows band automatically, so an editor adding a sixth row
      gets the right background without touching any style control. */
.sd-report__rows > *:nth-child(odd) { background-color: var(--sd-card-alt); }
.sd-report__rows > *:nth-child(even) { background-color: var(--sd-card); }
.sd-report__rows > .sd-report__row--flag { background-color: var(--sd-card-flag); }

/* 3. Keyboard focus ring. GenerateBlocks styles hover and active states
      natively; :focus-visible is the one state it does not expose yet. */
.sd-focus:focus-visible {
  outline: 3px solid var(--sd-cyan);
  outline-offset: 3px;
}

/* 4. Header call to action. Printed into GeneratePress's menu bar container,
      which the theme renders in the desktop navigation and again in the mobile
      menu bar, so the button stays visible once the menu collapses. */
.main-navigation .menu-bar-items .sd-nav-cta > a {
  background-color: var(--sd-orange);
  color: var(--sd-on-dark);
  border-radius: var(--sd-radius-btn);
  padding: 12px 22px;
  line-height: 1.15;
  text-decoration: none;
}
.main-navigation .menu-bar-items .sd-nav-cta > a:hover,
.main-navigation .menu-bar-items .sd-nav-cta > a:focus {
  background-color: var(--sd-orange-hover);
  color: var(--sd-on-dark);
}