/* ==========================================================================
   Harvard-Westlake theme for Submitty
   Mirrors the design tokens of https://learn.hw.com (assets/index-*.css):
   brand colours, Source Sans Pro, 8px/6px radii, soft shadows, red focus ring.
   Loaded after colors.css / global.css (see Output::setInternalResources).
   ========================================================================== */

/* ---- learn.hw.com design tokens (copied verbatim) ---------------------- */
:root {
    --hw-brand-black: #000000;
    --hw-brand-red: #da0016;
    --hw-brand-gold: #eda300;
    --hw-brand-red-20: rgb(218 0 22 / 20%);
    --hw-secondary-blue: #539adc;
    --hw-secondary-blue-50: rgb(83 154 220 / 50%);
    --hw-secondary-blue-20: rgb(83 154 220 / 20%);
    --hw-secondary-black: #4d4d4d;
    --hw-secondary-black-50: rgb(77 77 77 / 50%);
    --hw-secondary-black-20: rgb(77 77 77 / 20%);
    --hw-secondary-khaki: #bfc299;
    --hw-secondary-khaki-50: rgb(191 194 153 / 50%);
    --hw-secondary-khaki-20: rgb(191 194 153 / 20%);
    --hw-secondary-orange: #fa7300;
    --hw-secondary-orange-50: rgb(250 115 0 / 50%);
    --hw-secondary-orange-20: rgb(250 115 0 / 20%);
    --hw-secondary-green: #9cca00;
    --hw-secondary-green-50: rgb(156 202 0 / 50%);
    --hw-secondary-green-20: rgb(156 202 0 / 20%);
    --hw-black: var(--hw-brand-black);
    --hw-red: var(--hw-brand-red);
    --hw-gold: var(--hw-brand-gold);
    --hw-info: var(--hw-secondary-blue);
    --hw-info-20: var(--hw-secondary-blue-20);
    --hw-success: var(--hw-secondary-green);
    --hw-success-20: var(--hw-secondary-green-20);
    --hw-warning: var(--hw-secondary-orange);
    --hw-warning-20: var(--hw-secondary-orange-20);
    --hw-surface: white;
    --hw-font-sans: "Source Sans 3", "Source Sans Pro", "Source Sans", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
    --hw-font-weight-black: 900;
    --hw-font-weight-bold: 700;
    --hw-font-weight-semib: 600;
    --hw-font-weight-reg: 400;
    --hw-font-weight-light: 300;
    --hw-radius: 8px;
    --hw-radius-sm: 6px;
    --hw-radius-xs: 4px;
    --hw-border: var(--hw-secondary-black-20);
    --hw-shadow: 0 1px 3px rgb(0 0 0 / 8%);
    --hw-card-shadow: 0 2px 4px rgb(0 0 0 / 10%);
    --hw-focus-ring: 0 0 0 3px var(--hw-brand-red-20);
    --hw-page-bg: radial-gradient(1200px 600px at 0 -10%, var(--hw-secondary-blue-20), transparent 60%), linear-gradient(white, var(--hw-secondary-khaki-20));

    /* derived shades (learn.hw.com uses #e60000 for hover/focus) */
    --hw-red-hover: #b80012;
    --hw-red-active: #a50011;
    --hw-red-dark: #8a000e;
    --hw-red-focus: #e60000;
}

/* ---- Re-point Submitty's palette at the HW tokens (light theme) -------- */
:root {
    --submitty-logo-blue: var(--hw-red);

    /* primary buttons */
    --actionable-blue: var(--hw-red);
    --focus-actionable-blue: var(--hw-red-focus);
    --hover-actionable-blue: var(--hw-red-hover);
    --hover-light-border-actionable-blue: var(--hw-red-hover);
    --hover-border-actionable-blue: var(--hw-red-active);
    --hover-dark-border-actionable-blue: var(--hw-red-dark);

    /* links */
    --external-link-blue: var(--hw-red);
    --external-link-hover: var(--hw-red-active);
    --external-link-active: var(--hw-secondary-black);
    --file-browser-blue: var(--hw-red);

    /* sidebar */
    --nav-sidebar-text: var(--hw-secondary-black);
    --sidebar-hover-text: var(--hw-black);
    --selected-nav-sidebar: var(--hw-secondary-khaki-20);

    /* page + neutral surfaces */
    --background-blue: #f2f0ec;
    --standard-pale-blue-gray: var(--hw-secondary-khaki-20);
    --btn-standard-pale-blue-gray: var(--hw-secondary-khaki-20);
    --btn-default-active: var(--hw-secondary-khaki-20);
    --viewed-content: var(--hw-secondary-khaki-20);

    /* informational blue -> HW secondary blue */
    --info-blue: var(--hw-secondary-blue);
    --hover-focus-info-blue: #3f86c9;
    --hover-active-all-info-blue: #3576b4;
    --standard-medium-blue: var(--hw-secondary-blue);
    --table-info: var(--hw-secondary-blue-20);
    --alert-background-blue: var(--hw-secondary-blue-20);
}

/* ---- Dark theme: keep Submitty's dark surfaces, use lighter HW accents -- */
[data-theme="dark"] {
    --actionable-blue: var(--hw-red);
    --focus-actionable-blue: var(--hw-red-focus);
    --hover-actionable-blue: var(--hw-red-hover);
    --hover-light-border-actionable-blue: var(--hw-red-hover);
    --hover-border-actionable-blue: var(--hw-red-active);
    --hover-dark-border-actionable-blue: var(--hw-red-dark);
    --external-link-blue: #ff6b78;
    --external-link-hover: #ff8f99;
    --external-link-active: #ffffff;
    --file-browser-blue: #ffffff;
    --nav-sidebar-text: #c8c8c8;
    --sidebar-hover-text: #ffffff;
    --selected-nav-sidebar: #535353;
    --background-blue: #202225;
    --standard-pale-blue-gray: #2a2224;
    --btn-standard-pale-blue-gray: #2a2224;
    --btn-default-active: #6d6d6d;
    --viewed-content: #2a2224;
    --table-info: #566268;
    --alert-background-blue: #687379;
}

/* ---- Typography ---------------------------------------------------------- */
body {
    font-family: var(--hw-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:root:not([data-theme="dark"]),
:root:not([data-theme="dark"]) body {
    background: var(--hw-page-bg);
    background-attachment: fixed;
}

/* ---- Top bar (mirrors .hw-topnav / .hw-brand) ---------------------------- */
nav.flex-row.shadow {
    background: var(--default-white);
    border-bottom: 1px solid var(--hw-border);
    border-radius: 0;
    box-shadow: none;
}

#duckdiv {
    display: none;
}

#logo-box {
    text-decoration: none;
    justify-content: center;
    padding: 8px 20px 8px 0;
}

.hw-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-black);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;
}

#logo-hw,
#submitty-mascot-home-btn {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: var(--hw-radius-xs);
}

#submitty-mascot-home-btn {
    margin: 4px;
}

html .black-btn:hover,
html .black-btn:hover > i,
html .black-btn > i:hover,
html .black-btn > i.fas:hover {
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--hw-red) !important;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--hw-red) !important;
}

/* ---- Cards (mirrors .container on learn.hw.com) -------------------------- */
html .content,
html .shadow {
    border-radius: var(--hw-radius);
    box-shadow: var(--hw-card-shadow);
}

/* ---- Buttons (mirrors .btn) --------------------------------------------- */
html .btn {
    border-radius: var(--hw-radius-sm);
    font-family: inherit;
    font-weight: var(--hw-font-weight-semib);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html .btn:focus-visible {
    outline: none;
    box-shadow: var(--hw-focus-ring);
}

/* ---- Form controls (mirrors input/select/textarea) ----------------------- */
html input[type="text"],
html input[type="password"],
html input[type="email"],
html input[type="number"],
html input[type="search"],
html input[type="url"],
html select,
html textarea {
    border: 1px solid var(--hw-border);
    border-radius: var(--hw-radius-sm);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html input[type="text"]:focus,
html input[type="password"]:focus,
html input[type="email"]:focus,
html input[type="number"]:focus,
html input[type="search"]:focus,
html input[type="url"]:focus,
html select:focus,
html textarea:focus {
    outline: none;
    border-color: var(--hw-red);
    box-shadow: var(--hw-focus-ring);
}

/* ---- Login page ---------------------------------------------------------- */
#login-box {
    border-radius: var(--hw-radius);
}

#login-box h1::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: var(--hw-radius-xs);
    background: url("../img/hw-crest.png") center / contain no-repeat;
}

/* ---- Footer (mirrors .hw-footer) ---------------------------------------- */
html footer {
    background: var(--default-white);
    border-top: 1px solid var(--hw-border);
    font-size: 14px;
}