/* GAOC controls: keep each foreground and background together.
 * These rules deliberately target controls, not general lesson text or media.
 * Gold uses dark text; charcoal uses white text; light surfaces use dark text.
 */
:root {
    --gaoc-control-dark: #303030;
    --gaoc-control-dark-hover: #171717;
    --gaoc-control-light: #ffffff;
    --gaoc-control-light-hover: #eeeeee;
    --gaoc-control-ink: #111111;
    --gaoc-control-gold: #b8860b;
    --gaoc-control-gold-hover: #c99619;
}

/* Theme links can occur inside editorial paragraphs or the English app. */
body:not(.wp-admin) .button,
#eaca-app a.button {
    --control-bg: var(--gaoc-control-dark);
    --control-hover: var(--gaoc-control-dark-hover);
    --control-fg: #ffffff;
    background: var(--control-bg);
    color: var(--control-fg);
    border-color: var(--control-bg);
    text-shadow: none;
}
body:not(.wp-admin) .button.button-red,
#eaca-app a.button.button-red {
    --control-bg: var(--gaoc-control-gold);
    --control-hover: var(--gaoc-control-gold-hover);
    --control-fg: var(--gaoc-control-ink);
}
body:not(.wp-admin) .button.button-white,
#eaca-app a.button.button-white,
#eaca-app .hero a.button:not(.primary) {
    --control-bg: var(--gaoc-control-light);
    --control-hover: var(--gaoc-control-light-hover);
    --control-fg: var(--gaoc-control-ink);
    background: var(--control-bg);
    color: var(--control-fg);
    border-color: #767676;
}
body:not(.wp-admin) .button:is(:hover, :focus-visible, :active, :visited),
#eaca-app a.button:is(:hover, :focus-visible, :active, :visited) {
    color: var(--control-fg);
}
body:not(.wp-admin) .button:hover,
#eaca-app a.button:hover {
    background: var(--control-hover);
    border-color: var(--control-hover);
}
body:not(.wp-admin) .button :is(span, small, strong, em),
#eaca-app a.button :is(span, small, strong, em) {
    color: inherit;
}

/* A generic activity hover must not turn a white-on-dark action white-on-grey. */
#eaca-app button.primary,
#eaca-app .ac-activity button.primary,
#eaca-app button.ac-dialog-close {
    background: var(--gaoc-control-dark);
    color: #ffffff;
    border-color: var(--gaoc-control-dark);
}
#eaca-app button.primary:hover,
#eaca-app .ac-activity button.primary:hover,
#eaca-app button.ac-dialog-close:hover {
    background: var(--gaoc-control-dark-hover);
    color: #ffffff;
    border-color: var(--gaoc-control-dark-hover);
}
#eaca-app button.primary :is(span, small, strong, em) { color: inherit; }
#eaca-app .ga-access-badge,
#eaca-app .hero p.ga-access-badge {
    background: #f5edda;
    color: var(--gaoc-control-ink);
    border-color: #806000;
}

/* The secondary variants previously lost to .avsec button.avsec-button. */
.avsec .avsec-button.secondary,
.s1026 .s1026-button.secondary {
    background: #eaeaea;
    color: var(--gaoc-control-ink) !important;
    border: 1px solid #767676;
}
.avsec .avsec-button.secondary:hover,
.s1026 .s1026-button.secondary:hover {
    background: #dedede;
    color: var(--gaoc-control-ink) !important;
}
.avsec :is(.avsec-audio-tools, .avsec-sequence, .avsec-study-bar) button,
.s1026 :is(.s1026-audio-tools, .s1026-sequence, .s1026-study-bar) button {
    color: var(--gaoc-control-ink);
}
.avsec .avsec-exam-nav button:not([aria-current]),
.s1026 .s1026-exam-nav button:not([aria-current]) {
    color: var(--gaoc-control-ink);
}
.gc-coach button.gc-primary:hover {
    background: var(--gaoc-control-dark-hover);
    color: #ffffff;
    border-color: var(--gaoc-control-dark-hover);
}

/* The same faculty controls are used in WordPress and in the front-end desk. */
.wp-admin :is(.gcc, .crm-desk, .avseci-admin) a.button-primary,
.wp-admin :is(.gcc, .crm-desk, .avseci-admin) button.button-primary {
    background: var(--gaoc-control-dark);
    color: #ffffff;
    border-color: var(--gaoc-control-dark);
}
.wp-admin :is(.gcc, .crm-desk, .avseci-admin) .button-primary:hover {
    background: var(--gaoc-control-dark-hover);
    color: #ffffff;
    border-color: var(--gaoc-control-dark-hover);
}

/* Keep disabled controls readable. The muted solid pair replaces opacity,
 * whose effective contrast depends on the page behind the whole control.
 * !important is limited to this state to beat legacy important button colours.
 */
body:not(.wp-admin) :is(button, input[type="submit"], input[type="button"]):disabled,
body:not(.wp-admin) :is(.button, [role="button"])[aria-disabled="true"],
.wp-admin :is(.gcc, .crm-desk, .avseci-admin) :is(button, input[type="submit"]):disabled {
    background: #e5e7eb !important;
    color: #4b5563 !important;
    border-color: #89919d !important;
    opacity: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
}
body:not(.wp-admin) button:disabled :is(span, small, strong, em),
body:not(.wp-admin) [aria-disabled="true"] :is(span, small, strong, em) {
    color: inherit !important;
    opacity: 1 !important;
}
/* The assessment intentionally replaces its label with a loading spinner. */
.eac-ea-button.is-loading:disabled { color: transparent !important; }
.eac-ea-button.is-loading:disabled::after {
    border-color: #89919d;
    border-top-color: #303030;
}

/* A two-colour focus ring stays visible on light, dark and gold surfaces. */
body:not(.wp-admin) :is(a, button, input, select, textarea, summary):focus-visible,
#eaca-app :is(a, button, input, select, textarea, summary):focus-visible,
#gaoc-lab :is(a, button, input, select, textarea, summary):focus-visible,
.wp-admin :is(.gcc, .crm-desk, .avseci-admin) :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #303030;
}
@media (forced-colors: active) {
    body:not(.wp-admin) :is(a, button, input, select, textarea, summary):focus-visible,
    #eaca-app :is(a, button, input, select, textarea, summary):focus-visible,
    #gaoc-lab :is(a, button, input, select, textarea, summary):focus-visible,
    .wp-admin :is(.gcc, .crm-desk, .avseci-admin) :is(a, button, input, select, textarea, summary):focus-visible {
        outline-color: Highlight;
        box-shadow: none;
    }
}