/*!
 * Milligram v1.4.1 — ADVx Brand Theme
 * Based on https://milligram.io · MIT License
 * Brand: Barlow Condensed · Trail Orange · Pitch Black
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
    /* Backgrounds — darkest → lightest                                        */
    --color-bg:            #1A1A1A;   /* Page — lighter, content layer         */
    --color-surface:       #0F0F0F;   /* Navbar, sidebar — darker than page    */
    --color-input-bg:      #222222;   /* Form inputs — sits above page bg      */
    --color-border:        #2A2A2A;   /* Dividers, card borders                */
    --color-border-input:  #3A3A3A;   /* Input borders — more visible          */

    /* Text hierarchy — carefully stepped for dark backgrounds                 */
    --color-body:          #E8E4DF;   /* Primary text: headings, values        */
    --color-secondary:     #BBBBBB;   /* Body copy, descriptions               */
    --color-muted:         #888888;   /* Labels, metadata keys, nav inactive   */
    --color-dim:           #555555;   /* Placeholders, disabled states         */

    /* Brand                                                                    */
    --color-primary:       #C8561E;   /* Burnt Orange — muted, earthy          */
    --color-primary-dark:  #D46428;   /* Hover / active state                  */
    --color-primary-light: rgba(200, 86, 30, 0.15); /* Focus ring glow        */
    --color-primary-border:#8C3A10;   /* Orange element borders                */
    --color-alert:         #CC3322;   /* Destructive / error only              */
    --color-success:       #2E7D52;   /* Success states                        */

    /* Misc                                                                     */
    --color-white:         #E8E4DF;   /* "White" — dust, not pure #FFF         */
    --color-code-bg:       #222222;
    --radius:              0.3rem;
    --font-sans:           'Barlow', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    --font-condensed:      'Barlow Condensed', 'Barlow', 'Arial Narrow', sans-serif;
    --font-mono:           'Courier New', 'Courier', monospace;
    --transition:          0.15s ease;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*,
*:after,
*:before {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    background-color: var(--color-bg);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
body {
    background-color: var(--color-bg);
    color: var(--color-secondary);   /* Body copy — secondary, not blinding   */
    font-family: var(--font-sans);
    font-size: 1.6em;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.6;
    margin: 0;
}

/* ─── Blockquote ─────────────────────────────────────────────────────────── */
blockquote {
    border-left: 0.3rem solid var(--color-primary);
    margin-left: 0;
    margin-right: 0;
    padding: 1.2rem 1.8rem;
    background-color: var(--color-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--color-body);
}

blockquote *:last-child {
    margin-bottom: 0;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    background-color: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
    border-radius: var(--radius);
    color: #0A0A0A;
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-condensed);
    font-size: 1.2rem;
    font-weight: 700;
    height: 3.8rem;
    letter-spacing: 0.15rem;
    line-height: 3.8rem;
    padding: 0 3.0rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.button:focus, .button:hover,
button:focus, button:hover,
input[type='button']:focus, input[type='button']:hover,
input[type='reset']:focus,  input[type='reset']:hover,
input[type='submit']:focus, input[type='submit']:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #0A0A0A;
    outline: 0;
}

.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
    cursor: default;
    opacity: 0.4;
}

.button[disabled]:focus, .button[disabled]:hover,
button[disabled]:focus, button[disabled]:hover,
input[type='button'][disabled]:focus, input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,  input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus, input[type='submit'][disabled]:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Outline ─── */
.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
    background-color: transparent;
    color: var(--color-primary);
}

.button.button-outline:focus, .button.button-outline:hover,
button.button-outline:focus, button.button-outline:hover,
input[type='button'].button-outline:focus, input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,  input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus, input[type='submit'].button-outline:hover {
    background-color: transparent;
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus, button.button-outline[disabled]:hover {
    border-color: inherit;
    color: var(--color-primary);
}

/* Clear ─── */
.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-primary);
}

.button.button-clear:focus, .button.button-clear:hover,
button.button-clear:focus, button.button-clear:hover,
input[type='button'].button-clear:focus, input[type='button'].button-clear:hover,
input[type='reset'].button-clear:focus,  input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus, input[type='submit'].button-clear:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-primary-dark);
}

.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus, button.button-clear[disabled]:hover {
    color: var(--color-primary);
}

/* Alert ─── */
.button.button-alert,
button.button-alert,
input[type='button'].button-alert,
input[type='reset'].button-alert,
input[type='submit'].button-alert {
    background-color: var(--color-alert);
    border-color: var(--color-alert);
    color: var(--color-white);
}

/* Do the same for the Outline/Clear variants to be safe */
.button.button-alert.button-outline,
button.button-alert.button-outline {
    background-color: transparent;
    color: var(--color-alert);
    border-color: var(--color-alert);
}

.button-alert.button-clear,
.button-alert.button-outline {
    background-color: transparent;
    color: var(--color-alert);
}

.button-alert.button-clear {
    border-color: transparent;
}

.button-small {
    font-size: 1rem;
    height: 3rem;
    line-height: 3rem;
    padding: 0 1.5rem;
}

/* ─── Code ───────────────────────────────────────────────────────────────── */
code {
    background: var(--color-code-bg);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius);
    font-size: 86%;
    margin: 0 0.2rem;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
    color: var(--color-primary);
    font-family: var(--font-mono);
}

pre {
    background: var(--color-code-bg);
    border-left: 0.3rem solid var(--color-primary);
    overflow-y: hidden;
    border-radius: 0 var(--radius) var(--radius) 0;
}

pre > code {
    border-radius: 0;
    border: none;
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
    color: var(--color-secondary);
}

/* ─── HR ─────────────────────────────────────────────────────────────────── */
hr {
    border: 0;
    border-top: 0.1rem solid var(--color-border);
    margin: 3.0rem 0;
}

/* ─── Inputs ─────────────────────────────────────────────────────────────── */
/*
 * THE FIX: explicit dark background — no transparency.
 * We avoid `transparent` because any light ancestor bleeds through
 * and renders the field white. All values are explicit, not inherited.
 */
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-input-bg);
    border: 0.1rem solid var(--color-border-input);
    border-radius: var(--radius);
    box-shadow: none;
    box-sizing: inherit;
    color: var(--color-body);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    height: 3.8rem;
    padding: 0.6rem 1.0rem 0.7rem;
    width: 100%;
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* Focus — orange glow, not a harsh outline */
input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='week']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-primary-light);
    outline: 0;
}

/*
 * Autofill override — Chrome/Safari inject bright yellow or blue
 * backgrounds that completely break dark themes. The inset box-shadow
 * trick paints over the browser's background without touching text.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--color-input-bg) inset !important;
    box-shadow: 0 0 0 100px var(--color-input-bg) inset !important;
    -webkit-text-fill-color: var(--color-body) !important;
    caret-color: var(--color-body);
}

/* Placeholder — visible but clearly secondary, not competing with entered text */
input::placeholder,
textarea::placeholder {
    color: var(--color-dim);
    opacity: 1;
}

select {
    background-color: var(--color-input-bg);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23888888" d="M0,0l6,8l6-8"/></svg>');
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 3.0rem;
}

select:focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23F06020" d="M0,0l6,8l6-8"/></svg>');
}

select[multiple] {
    background-image: none;
    height: auto;
}

textarea {
    min-height: 6.5rem;
    height: auto;
    resize: vertical;
}

label,
legend {
    display: block;
    font-family: var(--font-condensed);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    color: var(--color-muted);   /* #888 — readable, not blinding              */
    margin-bottom: 0.5rem;
}

fieldset {
    border-width: 0;
    padding: 0;
}

input[type='checkbox'],
input[type='radio'] {
    display: inline;
    accent-color: var(--color-primary);
    width: auto;
    height: auto;
}

.label-inline {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-secondary);
    margin-left: 0.5rem;
}

/* ─── Spacing ────────────────────────────────────────────────────────────── */
.button,
button,
dd,
dt,
li {
    margin-bottom: 1.0rem;
}

fieldset,
input,
select,
textarea {
    margin-bottom: 1.5rem;
}

blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
    margin-bottom: 2.5rem;
}

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.container {
    margin: 0 auto;
    max-width: 112.0rem;
    padding: 0 2.0rem;
    position: relative;
    width: 100%;
}

.row {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.row.row-no-padding                  { padding: 0; }
.row.row-no-padding > .column        { padding: 0; }
.row.row-wrap                        { flex-wrap: wrap; }
.row.row-top                         { align-items: flex-start; }
.row.row-bottom                      { align-items: flex-end; }
.row.row-center                      { align-items: center; }
.row.row-stretch                     { align-items: stretch; }
.row.row-baseline                    { align-items: baseline; }

.row .column {
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}

.row .column.column-offset-10        { margin-left: 10%; }
.row .column.column-offset-20        { margin-left: 20%; }
.row .column.column-offset-25        { margin-left: 25%; }
.row .column.column-offset-33,
.row .column.column-offset-34        { margin-left: 33.3333%; }
.row .column.column-offset-40        { margin-left: 40%; }
.row .column.column-offset-50        { margin-left: 50%; }
.row .column.column-offset-60        { margin-left: 60%; }
.row .column.column-offset-66,
.row .column.column-offset-67        { margin-left: 66.6666%; }
.row .column.column-offset-75        { margin-left: 75%; }
.row .column.column-offset-80        { margin-left: 80%; }
.row .column.column-offset-90        { margin-left: 90%; }

.row .column.column-10               { flex: 0 0 10%;      max-width: 10%; }
.row .column.column-20               { flex: 0 0 20%;      max-width: 20%; }
.row .column.column-25               { flex: 0 0 25%;      max-width: 25%; }
.row .column.column-33,
.row .column.column-34               { flex: 0 0 33.3333%; max-width: 33.3333%; }
.row .column.column-40               { flex: 0 0 40%;      max-width: 40%; }
.row .column.column-50               { flex: 0 0 50%;      max-width: 50%; }
.row .column.column-60               { flex: 0 0 60%;      max-width: 60%; }
.row .column.column-66,
.row .column.column-67               { flex: 0 0 66.6666%; max-width: 66.6666%; }
.row .column.column-75               { flex: 0 0 75%;      max-width: 75%; }
.row .column.column-80               { flex: 0 0 80%;      max-width: 80%; }
.row .column.column-90               { flex: 0 0 90%;      max-width: 90%; }

.row .column .column-top             { align-self: flex-start; }
.row .column .column-bottom          { align-self: flex-end; }
.row .column .column-center          { align-self: center; }

@media (min-width: 40rem) {
    .row {
        flex-direction: row;
        margin-left: -1.0rem;
        width: calc(100% + 2.0rem);
    }
    .row .column {
        margin-bottom: inherit;
        padding: 0 1.0rem;
    }
}

/* ─── Links ──────────────────────────────────────────────────────────────── */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:focus, a:hover {
    color: var(--color-primary-dark);
    outline: 0;
}

/* ─── Lists ──────────────────────────────────────────────────────────────── */
dl,
ol,
ul {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
}

dl dl, dl ol, dl ul,
ol dl, ol ol, ol ul,
ul dl, ul ol, ul ul {
    font-size: 90%;
    margin: 1.5rem 0 1.5rem 3.0rem;
}

ol { list-style: decimal inside; }
ul { list-style: circle inside; }

/* ─── Table ──────────────────────────────────────────────────────────────── */
table {
    border-spacing: 0;
    display: block;
    overflow-x: auto;
    text-align: left;
    width: 100%;
}

th {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: var(--color-muted);
    background-color: var(--color-surface);
}

td, th {
    border-bottom: 0.1rem solid var(--color-border);
    padding: 1.2rem 1.5rem;
}

td {
    color: var(--color-secondary);
}

td:first-child, th:first-child { padding-left: 0; }
td:last-child,  th:last-child  { padding-right: 0; }

@media (min-width: 40rem) {
    table {
        display: table;
        overflow-x: initial;
    }
}

/* ─── Typography ─────────────────────────────────────────────────────────── */
b, strong {
    font-weight: 700;
    color: var(--color-body);
}

p {
    margin-top: 0;
    color: var(--color-secondary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-condensed);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 2.0rem;
    margin-top: 0;
    color: var(--color-body);
    line-height: 1.15;
    text-transform: uppercase;
}

h1 { font-size: 4.8rem; font-weight: 800; line-height: 1.1;  }
h2 { font-size: 3.6rem; line-height: 1.2;  }
h3 { font-size: 2.8rem; line-height: 1.25; }
h4 { font-size: 2.2rem; line-height: 1.3;  }
h5 { font-size: 1.8rem; line-height: 1.4; color: var(--color-secondary); }
h6 { font-size: 1.2rem; letter-spacing: 0.15em; color: var(--color-muted); }

img {
    max-width: 100%;
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.clearfix:after {
    clear: both;
    content: ' ';
    display: table;
}

.float-left  { float: left; }
.float-right { float: right; }