/* ============================================================
   GEST — GLOBAL VISUAL THEME
   STRONG PEACH CRUMPLED PAPER + FIXED-WIDTH TYPOGRAPHY
   ============================================================ */

html {
    background: #f1b9a5 !important;
}

body {
    background-color: #f1b9a5 !important;

    background-image:
        url("/assets/gest-crumpled-peach.svg") !important;

    background-repeat: repeat !important;
    background-size: 1200px 1200px !important;
    background-attachment: fixed !important;

    color: #173f45 !important;

    font-family:
        "Courier New",
        Courier,
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace !important;
}

/* ------------------------------------------------------------
   FIXED-WIDTH FONT EVERYWHERE
   ------------------------------------------------------------ */

body *,
body *::before,
body *::after {
    font-family:
        "Courier New",
        Courier,
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace !important;
}

/* ------------------------------------------------------------
   OVERRIDE PAGE-LEVEL BODY BACKGROUNDS
   These rules are intentionally strong so old page CSS
   cannot hide the paper.
   ------------------------------------------------------------ */

body[style*="background"],
body[style*="background-color"] {
    background-color: #f1b9a5 !important;
    background-image:
        url("/assets/gest-crumpled-peach.svg") !important;
    background-repeat: repeat !important;
    background-size: 1200px 1200px !important;
    background-attachment: fixed !important;
}

/* ------------------------------------------------------------
   PRESERVE READABILITY OF CONTENT CARDS
   ------------------------------------------------------------ */

main > .hero,
main > .policy,
main > .card,
main > .resource,
main > .resource-card,
main > section,
.card,
.policy,
.resource,
.resource-card,
.hero,
.panel,
.box,
.login-box,
.login-card,
.form-card,
.table-card,
.stat-card,
.pub-card,
.pub-box {
    background-color: rgba(255,248,244,.90) !important;
}

/* ------------------------------------------------------------
   INPUTS / FORMS
   ------------------------------------------------------------ */

input,
textarea,
select {
    font-family:
        "Courier New",
        Courier,
        ui-monospace,
        monospace !important;

    background-color: rgba(255,250,247,.96) !important;
}

/* ------------------------------------------------------------
   FIXED-WIDTH HEADINGS
   ------------------------------------------------------------ */

h1,h2,h3,h4,h5,h6 {
    font-family:
        "Courier New",
        Courier,
        ui-monospace,
        monospace !important;
}

/* ------------------------------------------------------------
   HEADER REMAINS AS CURRENTLY APPROVED
   ------------------------------------------------------------ */

.gest-site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
}

/* ------------------------------------------------------------
   PAPER SHOWS THROUGH AROUND MAIN CONTENT
   ------------------------------------------------------------ */

main,
.wrap,
.container,
.content,
.page,
.page-content {
    background: transparent !important;
}

/* ------------------------------------------------------------
   TABLES / CODE
   ------------------------------------------------------------ */

table,
thead,
tbody,
tr,
td,
th,
pre,
code {
    font-family:
        "Courier New",
        Courier,
        ui-monospace,
        monospace !important;
}


/*
 * GEST — GLOBAL GREEN CONTROL TEXT
 *
 * All dark-green buttons / controls must use white text.
 * This is a presentation-only rule.
 */

button[style*="background"],
a[style*="background"],
.btn[style*="background"],
.button[style*="background"],
.gest-btn[style*="background"],
.gest-button[style*="background"],
.gest-action[style*="background"],
.gest-card-action[style*="background"] {
    color: #ffffff !important;
}

button[style*="background"] *,
a[style*="background"] *,
.btn[style*="background"] *,
.button[style*="background"] *,
.gest-btn[style*="background"] *,
.gest-button[style*="background"] *,
.gest-action[style*="background"] *,
.gest-card-action[style*="background"] * {
    color: #ffffff !important;
}

/*
 * Common GEST dark-green controls.
 */
.gest-green,
.gest-green-btn,
.gest-green-button,
.green-button,
.green-btn,
.action-button,
.primary-button,
.btn-primary,
button.primary,
a.primary {
    color: #ffffff !important;
}

.gest-green *,
.gest-green-btn *,
.gest-green-button *,
.green-button *,
.green-btn *,
.action-button *,
.primary-button *,
.btn-primary *,
button.primary *,
a.primary * {
    color: #ffffff !important;
}

/*
 * Preserve white text on hover/focus/active states.
 */
.gest-green:hover,
.gest-green-btn:hover,
.gest-green-button:hover,
.green-button:hover,
.green-btn:hover,
.action-button:hover,
.primary-button:hover,
.btn-primary:hover,
button.primary:hover,
a.primary:hover,
.gest-green:focus,
.gest-green-btn:focus,
.gest-green-button:focus,
.green-button:focus,
.green-btn:focus,
.action-button:focus,
.primary-button:focus,
.btn-primary:focus,
button.primary:focus,
a.primary:focus,
.gest-green:active,
.gest-green-btn:active,
.gest-green-button:active,
.green-button:active,
.green-btn:active,
.action-button:active,
.primary-button:active,
.btn-primary:active,
button.primary:active,
a.primary:active {
    color: #ffffff !important;
}


/*
 * ============================================================
 * GEST — DARK GREEN / TEAL SURFACE TEXT VISIBILITY
 * ============================================================
 *
 * Some GEST controls use a dark green/teal background supplied
 * by different component classes. The text must remain white
 * regardless of the class that supplies the background.
 */

.gest-dark-surface-text,
.gest-dark-surface-text *,
.gest-dark-surface-text:hover,
.gest-dark-surface-text:hover *,
.gest-dark-surface-text:focus,
.gest-dark-surface-text:focus *,
.gest-dark-surface-text:active,
.gest-dark-surface-text:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/*
 * The following rules are activated by the GEST frontend
 * color detector below.
 */

.gest-dark-surface-text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.gest-dark-surface-text a,
.gest-dark-surface-text button,
.gest-dark-surface-text span,
.gest-dark-surface-text strong,
.gest-dark-surface-text b,
.gest-dark-surface-text em,
.gest-dark-surface-text small,
.gest-dark-surface-text label,
.gest-dark-surface-text h1,
.gest-dark-surface-text h2,
.gest-dark-surface-text h3,
.gest-dark-surface-text h4,
.gest-dark-surface-text h5,
.gest-dark-surface-text h6,
.gest-dark-surface-text p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/*
 * GEST rendered-background detector.
 *
 * This identifies dark green / teal backgrounds by their actual
 * RGB value after all CSS has been applied.
 */


/* GEST DARKMODE OVERRIDE — DO NOT REMOVE */
body.darkmode,
html body.darkmode {
    background-color:#101b18 !important;
    color:#f5eeea !important;
}

body.darkmode header,
body.darkmode .nav,
body.darkmode nav,
body.darkmode main,
body.darkmode section,
body.darkmode footer {
    background-color:#101b18 !important;
    color:#f5eeea !important;
}

body.darkmode .hero,
body.darkmode .section,
body.darkmode .card,
body.darkmode .workflow > div,
body.darkmode table,
body.darkmode .contactbox {
    background-color:#211917 !important;
    color:#f5eeea !important;
}

body.darkmode h1,
body.darkmode h2,
body.darkmode h3,
body.darkmode h4,
body.darkmode h5,
body.darkmode h6,
body.darkmode p,
body.darkmode li,
body.darkmode label,
body.darkmode span,
body.darkmode a {
    color:#f5eeea !important;
}

body.darkmode input,
body.darkmode textarea,
body.darkmode select {
    background-color:#211917 !important;
    color:#f5eeea !important;
    border-color:#5d7180 !important;
}

body.darkmode button,
body.darkmode .theme-toggle button {
    background-color:#c47760 !important;
    color:#ffffff !important;
    border-color:#c47760 !important;
}