/*
 * Purple accent override for Paradigm Shift (HTML5 UP).
 * Loaded after main.css so it wins specificity ties on properties it sets.
 *
 * Palette:
 *   --purple        #784B84   primary accent (matches the linework)
 *   --purple-bright #9665a4   hover / focus
 *   --purple-soft   #b888c8   active / lighter accents
 *   --purple-deep   #5e3968   pressed / dark text on light bg
 */

:root {
  --purple: #784B84;
  --purple-bright: #9665a4;
  --purple-soft: #b888c8;
  --purple-deep: #5e3968;
}

/* Outline button hover — Paradigm Shift uses box-shadow inset, not border-color,
   so we must replace the box-shadow itself. */
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  box-shadow: inset 0 0 0 2px var(--purple) !important;
  color: var(--purple) !important;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
  background-color: rgba(120, 75, 132, 0.18) !important;
  box-shadow: inset 0 0 0 2px var(--purple) !important;
  color: var(--purple) !important;
}

/* Primary buttons — solid purple at all states */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
  background-color: var(--purple) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
  background-color: var(--purple-bright) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
  background-color: var(--purple-deep) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Ribbon / accent surfaces from Paradigm Shift */
.intro h1::before,
.intro header::after,
section header::after {
  background-color: var(--purple) !important;
}

/* Scroll-arrow / "Next" indicator */
.arrow {
  background-color: var(--purple) !important;
}
.arrow:hover {
  background-color: var(--purple-bright) !important;
}

/* Form inputs — focus border + ring */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
  border-color: rgba(120, 75, 132, 0.25);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 1px var(--purple) !important;
}

/* Inline link color inside .content blocks */
.content a:not(.button):not(.icon) {
  color: var(--purple-deep);
}
.content a:not(.button):not(.icon):hover {
  color: var(--purple);
}

/* Selection */
::selection { background: var(--purple); color: #fff; }
::-moz-selection { background: var(--purple); color: #fff; }