/*
 * DGA tokens applied to the theme's shared button component
 * (resources/views/components/buttons/button.blade.php)
 *
 * The component itself wasn't restructured -- same markup, same 7 named
 * variations (`primary`, `secondary`, `tertiary`, `ghost`, `borderless-white`,
 * `borderless-green`, `underline`), same optional trailing-icon box. Two
 * plain class names were added to the blade file (`dga-button--{variation}`
 * on the <a>, `dga-button__label` / `dga-button__icon` on the inner divs)
 * so this stylesheet has something stable to target -- the Tailwind color
 * utility classes already on those divs are left in place and overridden
 * here rather than rewritten, since this project's Tailwind/Bud build
 * wasn't confirmed running in this environment; editing the blade file's
 * Tailwind classes directly risked a silent no-op if nothing recompiles it.
 *
 * Source of truth: DGA's real `.dga-btn--*` rules from
 * `@platformscode/core@0.0.52` (dga-button-v2 -- the current one; the
 * original `dga-button` is marked deprecated in DGA's own source). Mapped
 * each of this theme's 7 variations to the closest matching DGA button
 * variant:
 *   primary          -> dga-btn--primary            (brand green fill)
 *   secondary         -> dga-btn--neutral--on-color   (white pill, for use
 *                        on a colored/image background -- this is the hero
 *                        "Learn more" button)
 *   tertiary          -> dga-btn--secondary-solid     (light neutral fill)
 *   ghost             -> dga-btn--secondary-outline   (outlined, transparent)
 *   borderless-white  -> dga-btn--transparent-on-color (for dark backgrounds)
 *   borderless-green  -> dga-btn--transparent, recolored brand green (DGA
 *                        doesn't have a named "always green text" button
 *                        variant -- closest real analog is their Link
 *                        component, not Button; this keeps the theme's
 *                        existing pattern but on real brand tokens)
 *   underline         -> same as borderless-green, with underline kept
 *
 * STATES: DGA's checklist (criterion #12) requires all six: Default,
 * Hovered, Pressed, Selected, Focused, Disabled. Initially only
 * Default+Hovered were implemented here; this pass adds the rest, mapped
 * exactly as DGA's own CSS structures them:
 *   - Hovered -> :hover (as before)
 *   - Focused -> :focus-visible, universal outline on every variant (DGA
 *     defines this once on the shared .dga-btn base, replicated the same
 *     way on .dga-button here)
 *   - "Pressed" -> DGA's own CSS oddly implements this via the :visited
 *     pseudo-class rather than :active (their component is an <a>-based
 *     web component; :visited is one of the few pseudo-classes CSS allows
 *     background-color changes on). Replicated as :visited here too, for
 *     the buttons that render as <a> tags -- harmless no-op on the plain
 *     <button> elements in partials/service-feedback.blade.php, since
 *     :visited never applies to non-anchor elements.
 *   - "Selected" -> DGA's own CSS uses :active (mousedown) for this one,
 *     confusingly -- replicated as :active here, which is what most people
 *     mean by a button's "active state" anyway and works on both <a> and
 *     <button>.
 *   - Disabled -> :disabled, [disabled] (button.blade.php already accepts
 *     a `disabled` prop, just wasn't styled until now)
 *
 * One correction made to DGA's own source: `.dga-btn--secondary-solid`'s
 * hover/pressed/selected states reference `--button-background-neutral-
 * default-hoverd` (sic) / `-pressed` / `-selected`, none of which are
 * actually defined anywhere in DGA's own compiled tokens (verified against
 * the full @platformscode/core token list) -- an apparent typo/bug in their
 * source. Used the real, defined `--button-background-neutral-hovered` /
 * `-pressed` / `-selected` tokens instead rather than reproducing the bug.
 */

.dga-button {
  border-radius: var(--radius-sm);
}
/* Client report: "Read More" (borderless-white, used on media cards) shows
   a stray underline under the label text only (not the icon) -- couldn't
   reproduce it via computed-style checks in headless Chrome (text-
   decoration and border-bottom both compute to none/0 at every level of
   the ancestor chain), which matches this session's established pattern
   of real-browser-only rendering differences on these button components.
   Rather than keep guessing at the exact mechanism, reset text-decoration
   explicitly across every link/visited/hover/active state -- safe
   regardless of cause, and `.dga-button--underline` (the one variant that
   WANTS an underline) sets its own text-decoration after this and wins by
   source order, so it's unaffected. */
.dga-button,
.dga-button:link,
.dga-button:visited,
.dga-button:hover,
.dga-button:active {
  text-decoration: none !important;
}

/* Client report: hover was blinking/flickering repeatedly (confirmed via a
   screen recording -- extracted frames showed the button alternating
   between its two colors with the cursor completely stationary, so this
   is a real rendering flicker, not a perception issue). Removing every
   `transition` on this component (including the single background-color-
   only one tried here, briefly) reliably fixes it -- their recording was
   Firefox, and this smells like a `transition` + `:hover` + `!important`
   combination that engine mishandles under some compositing path, though
   the exact mechanism wasn't pinned down further. Also removed the
   redundant `hover:bg-primary-600 transition-colors duration-300` Tailwind
   classes from button.blade.php's `primary` variation at the source
   (dga-buttons.css already fully owns this variant's colors) and the <a>
   wrapper's own `transition-all duration-400`, so there is no transition
   anywhere on this component at all -- an instant color swap only. To
   keep that swap perceptible without an animated fade, the hover color
   (dga-tokens.css, --button-background-primary-hovered) is set two tiers
   darker than the default rather than one. */
.dga-button,
.dga-button__label,
.dga-button__icon {
  transition: none !important;
}

.dga-button__label {
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
}

/* Focused -- universal, matches DGA's shared .dga-btn:focus-visible base */
.dga-button:focus-visible {
  outline: 2px solid var(--border-black);
  outline-offset: 1px;
}

/* Disabled -- universal handling of the [disabled]/aria-disabled state;
   per-variant background/text colors set below */
.dga-button[disabled],
.dga-button[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
}

/* ---- primary: brand green fill ---- */
.dga-button--primary .dga-button__label {
  background-color: var(--button-background-primary-hovered) !important;
  color: var(--text-oncolor-primary) !important;
  border-color: var(--button-background-primary-hovered) !important;
}
.dga-button--primary:hover .dga-button__label {
  background-color: var(--button-background-primary-pressed) !important;
  border-color: var(--button-background-primary-pressed) !important;
}
.dga-button--primary:visited .dga-button__label {
  background-color: var(--button-background-primary-pressed) !important;
  border-color: var(--button-background-primary-pressed) !important;
}
.dga-button--primary:active .dga-button__label {
  background-color: var(--button-background-primary-selected) !important;
  border-color: var(--button-background-primary-selected) !important;
}
.dga-button--primary[disabled] .dga-button__label,
.dga-button--primary[aria-disabled="true"] .dga-button__label {
  background-color: var(--background-disabled) !important;
  color: var(--text-default-disabled) !important;
  border-color: var(--background-disabled) !important;
}
.dga-button--primary .dga-button__icon {
  background-color: var(--button-background-primary-hovered) !important;
  color: var(--text-oncolor-primary) !important;
}
.dga-button--primary:hover .dga-button__icon,
.dga-button--primary:active .dga-button__icon {
  background-color: var(--button-background-primary-pressed) !important;
}

/* ---- secondary: white pill for use on a colored/image background
   (DGA's neutral--on-color) -- this is the hero "Learn more" button ---- */
.dga-button--secondary .dga-button__label {
  background-color: var(--button-background-oncolor-default) !important;
  color: var(--text-default) !important;
  border-color: transparent !important;
}
.dga-button--secondary:hover .dga-button__label {
  background-color: var(--button-background-oncolor-hovered) !important;
}
.dga-button--secondary:visited .dga-button__label,
.dga-button--secondary:active .dga-button__label {
  background-color: var(--button-background-oncolor-pressed) !important;
}
.dga-button--secondary[disabled] .dga-button__label,
.dga-button--secondary[aria-disabled="true"] .dga-button__label {
  background-color: var(--button-background-disabled-on-color) !important;
  color: var(--text-default-oncolor-disabled) !important;
}
.dga-button--secondary .dga-button__icon {
  background-color: var(--background-primary-50) !important;
  color: var(--colors-primary-sa-flag-600-primary) !important;
}

/* ---- tertiary: light neutral fill (DGA secondary-solid) ---- */
.dga-button--tertiary .dga-button__label {
  background-color: var(--button-background-neutral-default) !important;
  color: var(--colors-text-primary) !important;
  border-color: transparent !important;
}
.dga-button--tertiary:hover .dga-button__label {
  background-color: var(--button-background-neutral-hovered) !important;
}
.dga-button--tertiary:visited .dga-button__label {
  background-color: var(--button-background-neutral-pressed) !important;
}
.dga-button--tertiary:active .dga-button__label {
  background-color: var(--button-background-neutral-selected) !important;
}
.dga-button--tertiary[disabled] .dga-button__label,
.dga-button--tertiary[aria-disabled="true"] .dga-button__label {
  background-color: var(--background-disabled) !important;
  color: var(--text-default-disabled) !important;
}

/* ---- ghost: outlined, transparent fill (DGA secondary-outline) ---- */
.dga-button--ghost .dga-button__label {
  /* Client report: on a light-gray section background, a transparent fill
     + --border-neutral-secondary (neutral-200, very light) had almost no
     contrast against the page -- the button read as "merged" into the
     background. Give it its own white card background (so it reads as a
     distinct element on any light background) and the slightly darker
     --border-neutral-primary (neutral-300) instead of -secondary. */
  background-color: var(--background-card) !important;
  color: var(--text-default) !important;
  border: 1px solid var(--border-neutral-primary) !important;
}
.dga-button--ghost:hover .dga-button__label {
  background-color: var(--button-background-neutral-default) !important;
}
.dga-button--ghost:visited .dga-button__label {
  background-color: var(--button-background-neutral-pressed) !important;
  border-color: var(--border-neutral-primary) !important;
}
.dga-button--ghost:active .dga-button__label {
  background-color: var(--button-background-neutral-selected) !important;
  border-color: var(--border-neutral-primary) !important;
}
.dga-button--ghost[disabled] .dga-button__label,
.dga-button--ghost[aria-disabled="true"] .dga-button__label {
  background-color: transparent !important;
  color: var(--text-default-disabled) !important;
  border-color: var(--border-neutral-secondary) !important;
}

/* ---- borderless-white: for dark/colored backgrounds
   (DGA transparent-on-color) ---- */
.dga-button--borderless-white .dga-button__label {
  background-color: transparent !important;
  color: var(--text-oncolor-primary) !important;
}
.dga-button--borderless-white:hover .dga-button__label {
  background-color: var(--button-background-transparent-hovered) !important;
  color: var(--button-label-transparent-hovered-on-color) !important;
}
.dga-button--borderless-white:visited .dga-button__label {
  color: var(--button-label-transparent-selected-on-color) !important;
}
.dga-button--borderless-white:active .dga-button__label {
  color: var(--button-label-transparent-pressed-on-color) !important;
}
.dga-button--borderless-white[disabled] .dga-button__label,
.dga-button--borderless-white[aria-disabled="true"] .dga-button__label {
  background-color: transparent !important;
  color: var(--text-default-oncolor-disabled) !important;
}

/* ---- borderless-green / underline: brand-green text link style ---- */
.dga-button--borderless-green .dga-button__label,
.dga-button--underline .dga-button__label {
  background-color: transparent !important;
  color: var(--colors-primary-sa-flag-600-primary) !important;
}
.dga-button--borderless-green:hover .dga-button__label,
.dga-button--underline:hover .dga-button__label {
  color: var(--colors-primary-sa-flag-700) !important;
}
.dga-button--borderless-green:visited .dga-button__label,
.dga-button--underline:visited .dga-button__label {
  color: var(--button-background-primary-pressed) !important;
}
.dga-button--borderless-green:active .dga-button__label,
.dga-button--underline:active .dga-button__label {
  color: var(--button-background-primary-selected) !important;
}
.dga-button--borderless-green[disabled] .dga-button__label,
.dga-button--underline[disabled] .dga-button__label,
.dga-button--borderless-green[aria-disabled="true"] .dga-button__label,
.dga-button--underline[aria-disabled="true"] .dga-button__label {
  color: var(--text-default-disabled) !important;
}
.dga-button--underline .dga-button__label {
  text-decoration: underline;
}