/* =============================================================================
   Policies Web site styles
   1. Brand palette and theme variables
   2. Page layout
   3. Links and focus
   4. Policies components
   5. Page-specific styles
   ============================================================================= */

/* ---- 1. Brand palette and theme variables ----
   Digital crimson for all web/screen use. Gold and sky are accents only
   (max ~2% of a layout) and must never be used for text on light backgrounds. */
:root {
    --ouf-crimson: #841617;
    --ouf-crimson-rgb: 132, 22, 23;
    --ouf-gold: #FEC553;
    --ouf-sky: #2EBEEF;
    --ouf-black: #041019;
    --ouf-gray-dark: #64696F;
    --ouf-gray-dark-rgb: 100, 105, 111;
    --ouf-gray: #B6B9BF;
    --ouf-gray-light: #E2E3E7;
    --ouf-white: #ffffff;
    --ouf-page-bg: #f7f6f7;
    --ouf-error: #C12E27;
    /* Original app title color, kept across OUF apps although it isn't in the brand guide */
    --ouf-title: #9595D2;
}

/* ---- 2. Page layout ---- */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--ouf-black);
    background: var(--ouf-page-bg);
}

h1 {
    font-size: 1.6rem;
}

.header {
    background: var(--ouf-white);
    border-bottom-color: var(--ouf-gray-light) !important;
}

.ouf-logo {
    height: auto;
}

.header-links .nav-link {
    white-space: nowrap;
}

.title-caption {
    font-weight: 300;
    font-style: normal;
    color: var(--ouf-title);
    font-size: 2rem;
}

.subTitle-caption {
    color: var(--ouf-crimson);
    font-weight: bold;
    font-size: 1.1rem;
}

.content {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    background: var(--ouf-white);
    border-top-color: var(--ouf-gray-light) !important;
    color: var(--ouf-gray-dark);
}

@media (max-width: 767px) {
    .title-caption {
        font-size: 1.5rem;
    }

    .subTitle-caption {
        font-size: 0.9em;
    }
}

@media (min-width: 1200px) {
    .title-caption {
        font-size: 1.875em;
    }

    .subTitle-caption {
        font-size: 1.1em;
    }
}

/* ---- 3. Links and focus ---- */
a {
    text-decoration: none !important;
    color: var(--ouf-crimson) !important;
    font-weight: 500;
}

    a:focus, a:hover {
        color: var(--ouf-crimson);
    }

    a.navbar-brand:focus {
        outline: none;
    }

    /* Links inside bold text and headings keep the surrounding weight instead of dropping to the link weight */
    strong a,
    b a,
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        font-weight: inherit;
    }

/* ---- 4. Policies components ---- */

/* Page-level cards: crimson accent across the top */
.policy-card {
    border: 0;
    border-top: 4px solid var(--ouf-crimson);
}

    /* Secondary cards (Contact sections) use a neutral accent */
    .policy-card.policy-card-subtle {
        border-top-color: var(--ouf-gray);
    }

.card-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Document body */
.policy-page .card-body {
    padding: 2rem;
}

.policy-page h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ouf-crimson);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.policy-page h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.policy-page p {
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.policy-page ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

    .policy-page ul li {
        line-height: 1.7;
        margin-bottom: 0.25rem;
    }

/* Tables inside policy documents */
.policy-table {
    caption-side: top;
}

    .policy-table caption {
        font-weight: 700;
        color: var(--ouf-black);
    }

    .policy-table thead th {
        text-align: center;
        vertical-align: middle;
    }

    .policy-table tbody th,
    .policy-table tbody td {
        vertical-align: top;
    }

/* Staff-only notices (Internal Use banner, Staff Only page). Bootstrap's warning-alert colors, but
   no alert classes: browser ad and annoyance filters (Brave Shields) hide alert-like site notices. */
.staff-callout {
    padding: 1rem;
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    border-left-width: 4px;
    border-radius: var(--bs-border-radius);
}

    .staff-callout h1 {
        color: inherit;
    }

/* All Policies */
.btn.policy-primary-button {
    --bs-btn-bg: var(--ouf-crimson);
    --bs-btn-border-color: var(--ouf-crimson);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ouf-crimson) 85%, var(--ouf-black));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ouf-crimson) 85%, var(--ouf-black));
    --bs-btn-active-bg: color-mix(in srgb, var(--ouf-crimson) 75%, var(--ouf-black));
    --bs-btn-active-border-color: color-mix(in srgb, var(--ouf-crimson) 75%, var(--ouf-black));
    --bs-btn-focus-shadow-rgb: var(--ouf-crimson-rgb);
}

    /* Beats the !important crimson on the global link rule */
    a.btn.policy-primary-button {
        color: var(--ouf-white) !important;
    }

/* Back to Top */
.btn.policy-nav-button {
    --bs-btn-bg: var(--ouf-white);
    --bs-btn-border-color: var(--ouf-gray);
    --bs-btn-hover-bg: var(--ouf-gray-light);
    --bs-btn-hover-border-color: var(--ouf-gray);
    --bs-btn-active-bg: var(--ouf-gray-light);
    --bs-btn-active-border-color: var(--ouf-gray-dark);
    --bs-btn-focus-shadow-rgb: var(--ouf-gray-dark-rgb);
}

    /* Beats the !important crimson on the global link rule */
    a.btn.policy-nav-button {
        color: var(--ouf-black) !important;
    }

/* Index lists */
.policy-list-item {
    padding: 1rem 0.5rem;
}

.policy-list-title {
    font-weight: 700;
}

.policy-list-summary {
    color: var(--ouf-gray-dark);
    font-weight: 400;
}

/* Cross-link between the two indexes: an h2 shown at the page title's size */
.policy-page h2.policy-index-link {
    font-size: 1.6rem;
}

/* Internal section heading on the public index (filled by site.js) */
.policy-page h2.policy-internal-heading {
    color: var(--ouf-black);
    padding-top: 0.75rem;
}

/* ---- 5. Page-specific styles ---- */

/* Error page */
.policy-page .policy-error-title {
    color: var(--ouf-error);
}